SVG animateTransform与transform冲突

Question

我在尝试使用SVG图像进行一些动画和变换。

我试图翻译、调整大小和平移路径，并同时对其进行旋转动画。

似乎我只能同时进行平移和调整大小或者旋转。如果我尝试将它们全部放在一起，那么平移和调整大小就会失效：如果我移除动画，则它们被移动并且大小正确。

这种行为在Linux和OSX以及Firefox和Safari中保持一致。

示例：

<use
    id="tengear"
    fill="#ffffff"
    stroke="#E2E2E2"
    stroke-width="3"
    transform="scale(0.40) translate(62, 180)"
    style="filter:url(#distanceBlurFar)"
    xlink:href="#tengearuse"
>
    <animateTransform
        attributeType="XML"
        attributeName="transform"
        type="rotate"
        from="0,162,280" to="360,162,280"
        begin="0s" dur="11"
        repeatCount="indefinite"
    />
</use>

这个元素应该是小的、移动的并且旋转的。但是它现在很大，没有移动，只有旋转。

<use
    id="tengear"
    fill="#ffffff"
    stroke="#E2E2E2"
    stroke-width="3"
    transform="scale(0.40) translate(62, 180)"
    style="filter:url(#distanceBlurFar)"
    xlink:href="#tengearuse">
</use>

这个元素被移动和旋转了，但没有旋转。

有人能帮我解决如何让它工作吗？

*你需要假设使用和其他参考是有效的。

完整代码在此处

- Doug Miller

---

编辑是对彼得评论的回应。 - Doug Miller

Answer 1

事实证明这是一个RTFM问题。 转到规范并阅读关于additive="sum"和additive="replace"的内容。

现在它的内容如下：

<use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="2.5" transform="scale(0.25) translate(390, 360)" style="filter:url(#distanceBlurClose)" xlink:href="#tengearuse">
    <animateTransform
        attributeType="XML"
        attributeName="transform"
        type="rotate"
        from="0,390,360" to="360,390,360"
        begin="0s" dur="11"
        repeatCount="indefinite"
        additive="sum"
    />
</use>

- Doug Miller

Answer 2

不太清楚你想做什么，如果你能把示例缩小到可以在这里发布的大小，那会很有帮助。听起来你应该使用animateTransform和animateMotion。我经常从已经工作的示例开始，然后逐渐修改它以包含我的要求。并且始终尽可能少地使用功能。

请参见http://www.w3schools.com/svg/el_animatetransform.asp

- peter.murray.rust