google-chrome - SVG转换来源在Chrome中不起作用

Question

我有一个基于SVG的应用程序，该应用程序大量使用了平移，旋转和缩放等变换。虽然我在Firefox中没有问题，但在Chrome中，没有考虑transform-origin属性。似乎应用了用户代理默认值0px 0px 0。

这是一个示例(JSFiddle):

<svg width="400" height="400">
  <defs>
    <rect id="shape" width="200" height="200"/>
  </defs>
  <g transform="translate(100,100)">
    <use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
    <ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
    <g transform="translate(0,0) scale(0.5) rotate(45)" style="transform-origin: 100px 100px;">
      <use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
    </g>
  </g>
</svg>

如您所见，Chrome会从形状的左上角开始应用所有变换，而不管定义的原点如何，而Firefox会遵循定义的原点。

我是否缺少有关 transform-origin与SVG一起工作的信息？

有人真的找到了一种无需补偿翻译即可解决此问题的方法吗？

Answer 1

我在回答自己的问题，以完全弄清楚SVG 1.1转换函数上transform-origin属性的状况以及如何在Chrome 48中解决此问题。

首先，transform-origin是纯CSS 3属性，它与SVG 1.1完全无关。尽管transform听起来很像transform-origin，但它们适用于不同的系统。 transform在CSS 3和SVG 1.1中都存在，但是有单独的实现。 transform-origin 仅存在于CSS 3 中，因此不应影响SVG 1.1。预期transform-origin对Chrome 48中的SVG没有影响。

那么，为什么transform-origin确实适用于Firefox 44中的SVG？原因尚不完全清楚，但这似乎是Mozilla不断努力在Firefox中缓慢提供对SVG 2的支持的一部分。实际上，对于SVG 2，一切都会变成CSS 3转换(没有单独的实现)，因此SVG将获得对transform-origin的支持。我在关于Sara Soueidan的SVG coordinate systems的精彩文章中找到了有关此内容的信息。

现在，如何在Chrome 48中克服该问题。这非常简单，但是如果您想同时应用translate()，scale()和rotate()，您仍然需要计算缩放产生的偏移并在平移中对其进行补偿。

正如Bobby Orndorff在他的回答中提到的那样，实际上有可能通过提供额外的x和y参数来为rotate()函数提供旋转中心。这已经是一个很大的改进。但是不幸的是，scale()函数不支持这种功能，并且将始终从其父级的左上角缩放。因此，您仍然必须校正翻译才能模拟围绕中心的比例。

这是适用于Chrome 48和Firefox 44的最终解决方案:

<svg width="400" height="400">
  <defs>
    <rect id="shape" width="200" height="200"/>
  </defs>
  <g transform="translate(100,100)">
    <use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
    <ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
    <g transform="translate(50,50) scale(0.5) rotate(45, 100, 100)">
      <use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
    </g>
  </g>
</svg>