web-dev-qa-db-fra.com

Comment manipuler les transformations de traduction sur un élément SVG avec javascript en chrome?

Je veux manipuler l'attribut transform="translate(x,y)" d'un élément SVG en utilisant JavaScript.

J'ai donc obtenu ce code HTML:

<body>

<svg id="test" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100% 100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect transform="translate(100,100)" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    <rect transform="translate(400,400)" width="300" height="400" style="fill:red; stroke-width:1; stroke: yellow" />
</svg>

</body>

Et ce code JavaScript:

var positioner = (function(domUtils){

   var svg = document.getElementById("test");
   var elementOffset = 100;

   function getAbsoluteX(leftElement) {
    return domUtils.getWidth(leftElement) + elementOffset; 
   }

   function getAbsoluteY(topElement) {
    return domUtils.getHeight(topElement) + elementOffset;
   }   

   var rectangles = document.querySelectorAll("rect");
   for(var i = 0; i < rectangles.length; ++i) {
    var spaceLeft = 0;
    if(i > 0) {
      spaceLeft = getAbsoluteX(rectangles[i-1]);
    }
    var rect = rectangles[i];
    var attrValue = "translate(" + spaceLeft + ", 100)";
    rect.setAttribute('transform', attrValue);
   };
 })(domUtils);

Où getAbsoluteX() est une fonction auto-définie.

Cela fonctionne bien dans Firefox mais pas dans Chrome. Quelqu'un connaît une solution de contournement ou comment résoudre ce problème?

Merci. Cordialement.

javascriptgoogle-chromesvgtransform
31
user1360990

Il existe deux façons d'obtenir/définir des valeurs de transformation pour les éléments SVG dans Chrome, Firefox, IE ou tout agent utilisateur SVG redoutant les normes:

Gestion des transformations via des attributs

// Getting
var xforms = myElement.getAttribute('transform');
var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1],
    firstY = parts[2];

// Setting
myElement.setAttribute('transform','translate(30,100)');

Avantages : Simple à définir et à comprendre (identique au balisage).
Inconvénients : Vous devez analyser la valeur de la chaîne pour trouver ce que vous voulez; pour les valeurs animées, ne peut pas demander la valeur de base lorsque l'animation est active; se sent sale.

Gestion des transformations via les liaisons DOM SVG

// Getting
var xforms = myElement.transform.baseVal; // An SVGTransformList
var firstXForm = xforms.getItem(0);       // An SVGTransform
if (firstXForm.type == SVGTransform.SVG_TRANSFORM_TRANSLATE){
  var firstX = firstXForm.matrix.e,
      firstY = firstXForm.matrix.f;
}

// Setting
myElement.transform.baseVal.getItem(0).setTranslate(30,100);

Avantages : Pas besoin d'essayer d'analyser les chaînes par vous-même; préserve les listes de transformation existantes (vous pouvez interroger ou modifier une seule transformation dans la liste); vous obtenez de vraies valeurs, pas des chaînes.
Inconvénients : Peut être déroutant à comprendre au début; plus verbeux pour définir des valeurs simples; aucune méthode pratique pour extraire les valeurs de rotation, d'échelle ou d'inclinaison à partir de SVGTransform.matrix, manque de support du navigateur .

Vous trouverez peut-être un outil que j'ai écrit pour explorer le DOM utile.

  1. Allez sur http://objjob.phrogz.net/svg/object/131
  2. Cliquez sur "Afficher les propriétés/méthodes héritées?" case à cocher
  3. Vérifiez que SVGRectElement a une propriété transform qui est un SVGAnimatedTransformList.
  4. Cliquez sur SVGAnimatedTransformList pour voir les propriétés et méthodes prises en charge par l'objet .
  5. Explorer!
87
Phrogz