SVG animateTransform与变换冲突

问题描述：

我尝试了SVG图像中的一些动画和转换。SVG animateTransform与变换冲突

我想翻译和调整大小和翻译路径以及动画旋转。

看来我只能翻译和调整大小或一次旋转。如果我一起尝试它们，那么翻译和调整大小不会成立：如果我删除动画，那么它们会移动并且尺寸合适。

此行为在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

编辑是针对彼得的评论 – Hyposaurus 2010-11-08 08:08:34

答

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

Go to the spec and读关于添加剂=“太阳”和添加剂=“替换”

现在读起来像是：

  <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>

答

目前还不清楚是什么你正在尝试做的，如果你减少你的榜样的大小，这将有助于在那里你可以在这里发布。听起来好像你应该使用animateTransform和animateMotion。我经常从找到一个已经有效的例子开始，然后逐渐修改它以包含我自己的要求。并始终只使用尽可能少的功能可能

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

SVG animateTransform与变换冲突

相关推荐