问题 SVG的应用顺序转换

'transform'属性的值是<transform-list>，它被定义为变换定义列表，它按照提供的顺序应用。

...

如果提供了变换列表，那么净效果就好像每个变换都是按照提供的顺序单独指定的

当我尝试使用firefox，chrome和IE10中的跟随标记时，所有三个通过首先进行翻译，然后通过旋转进行渲染！见 codepen片段。我错过了什么？或者3个浏览器的实现不符合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>

10369

2017-09-03 01:51

起源

使用您的codepen快速播放似乎证实了我怀疑的内容。平移取决于旋转角度。假设你从一辆指向北方的汽车开始。如果向前移动5米，你将向北移动5米。相反，如果您将汽车顺时针旋转45°，然后向前开了5米，你向北移动了5米。所以你需要做两件事之一 - （1）重置（应用）如果可能的话，变换矩阵到obj - 就像在3D内容创建程序Blender，Maya，3dsMax等中那样。（2）你需要计算一个旋转翻译矢量。 - enhzflep

答案:

规范很清楚最先应用最右边的变换的顺序。

如果提供了变换列表，那么净效果就好像每个变换都是按照提供的顺序单独指定的。

即，

<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
  <!-- graphics elements go here -->
</g>

在功能上等同于：

<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>

2017-09-03 08:27

我明白了，谢谢。但规范应该明确规定这一点。 - cateyes

它确实！我发布的内容来自规范。 - Robert Longson

该规范极具误导性，它不会按照提供的顺序应用转换，而是创建一个嵌套的转换结构，其中首先应用最内部转换，这是列表中的最后一个转换。如果规范如此清晰，那么为什么几乎所有第一次尝试SVG的人都会绊倒。 - bikeman868

同意@ bikeman868，从右到左的变换顺序与规范措辞和假定的逻辑行为相反。每次都打败我。 - Yarin

@Yarin联系w3c并提出更新的措辞。 - Robert Longson

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));
}

2017-07-06 12:55

除了缺少的引号之外，这种方法不起作用，因为它覆盖了transform属性值。 - Melle

当然！我打算给出转换的顺序 - Chandu D

问题 SVG的应用顺序转换

答案:

热门问题