如何正确使用SVG animateTransform的cx、cy属性解决浏览器旋转偏移问题

问题原因 #

基于Chromium内核的Chrome、Edge浏览器对SVG根节点挂载的animateTransform旋转原点计算存在兼容偏差，不会正确合并内部元素的偏移量做换算，而Qt的QSvgWidget遵循完整的SVG 1.1规范，对根元素变换原点的解析符合标准，因此可以正常运行。

你代码中内部图形组<g id="layer1">自带translate(-69.67318,-75.994617)偏移，Chromium解析根节点的旋转中心11.5 11.5时没有和该偏移合并计算，导致实际旋转中心和圆弧的几何中心不重合，就会出现晃动偏移。

解决方法 #

将<animateTransform>从SVG根节点下移到<g id="layer1">内部，调整旋转中心为圆弧在组内的实际坐标，同时添加additive="sum"保证动画变换和原有平移变换叠加即可，修改后的核心代码如下：

<g
 inkscape:label="Layer 1"
 inkscape:groupmode="layer"
 id="layer1"
 transform="translate(-69.67318,-75.994617)">
<path
   style="fill:none;stroke:url(#linearGradient2846);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
   id="path833"
   sodipodi:type="arc"
   sodipodi:cx="81.170387"
   sodipodi:cy="87.492027"
   sodipodi:rx="10"
   sodipodi:ry="10"
   sodipodi:start="0"
   sodipodi:end="5.2186587"
   sodipodi:arc-type="arc"
   d="M 91.170387,87.492027 A 10,10 0 0 1 83.8004,97.139982 10,10 0 0 1 72.55378,92.566876 10,10 0 0 1 74.008018,80.513455 10,10 0 0 1 86.01957,78.746433"
   sodipodi:open="true"/>
<!-- 移动到组内的动画 -->
<animateTransform
    from="0 81.1704 87.492"
    to="360 81.1704 87.492"
    attributeName="transform"
    type="rotate"
    repeatCount="indefinite"
    dur="1300ms"
    additive="sum"
/>
</g>

修改后删除原来放在根节点下的<animateTransform>即可在Chromium内核浏览器中正常无偏移旋转。

内容的提问来源于stack exchange，提问作者Mat