SVG animateTransform与转换冲突

Question

我正在尝试SVG图像中的一些动画和变换。

我正在尝试平移、调整大小和平移路径，以及动画它的旋转。

似乎我一次只能平移、调整大小或旋转。如果我一起尝试它们，那么平移和调整大小就不成立了:如果我删除动画，那么它们就会被移动，并且大小合适。

这种行为在Linux和OSX以及FF和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>

这个是移动和旋转的，但不旋转。

有没有人能帮我解决这个问题？

*您需要假设使用和其他引用是有效的

Full source here

Answer 1

事实证明这是一个RTFM问题。

Go to the spec and阅读关于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>

Answer 2

目前还不清楚你想要做什么，如果你把你的例子缩小到可以在这里发布的大小，这将会有所帮助。听起来你应该使用animateTransform和animateMotion。我经常从找到一个已经有效的例子开始，然后逐渐修改它，以包括我自己的需求。并且总是只使用尽可能少的功能。

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