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 =“sun”和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

SVG animateTransform与transform冲突

2 个答案: