我在尝试使用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>
这个元素被移动和旋转了,但没有旋转。
有人能帮我解决如何让它工作吗?
*你需要假设使用和其他参考是有效的。