L'ordre D'application des transformations SVG
spécifications du W3C, il dit:
la valeur de l'attribut ‘transform’ est un , qui est défini comme une liste de définitions de transformation, qui sont appliquées dans l'ordre fourni.
...
Si une liste de transformations est fourni, alors l'effet net est comme si chaque transformation avait été indiquée séparément dans l'ordre fourni
quand j'ai essayé les marques suivantes dans firefox, chrome et IE10, tous les trois rendus en faisant traduire d'abord, puis en suivant par rotation! Voir le codepen extrait de. Qu'ai-je raté ici? Ou les implémentations des 3 navigateurs ne sont pas conformes au W3C?
<svg width="180" height="200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- This is the element before translation and rotation are applied -->
<rect x="0" y="0" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>
<!-- Now we add a text element and apply rotate and translate to both -->
<rect x="0" y="0" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="rotate(45 100 50) translate(50)"></rect>
</svg>
2 réponses
spécification est assez clair sur l'ordre qui est que la transformation la plus à droite est appliquée en premier.
Si une liste de transformations est fourni, alors l'effet net est comme si chaque transformation avait été indiquée séparément dans l'ordre prévu.
I. e,
<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
<!-- graphics elements go here -->
</g>
est fonctionnellement équivalent à:
<g transform="translate(-10,-20)">
<g transform="scale(2)">
<g transform="rotate(45)">
<g transform="translate(5,10)">
<!-- graphics elements go here -->
</g>
</g>
</g>
</g>
If you want to sequentially change these transformations
you have to try this one
<g transform="translate(-10,-20) onmouseover=changeTransform(evt)">
function changeTransfrom(evt)
{
var id=evt.target;
id.setAttribute('transform',scale(0.5));
id.setAttribute('transform',rotate(30));
id.setAttribute('transform',skewY(45));
id.setAttribute('transform',matrix(2,2));
}