使用 SVG 中的 <set> 标签来改变形状的旋转答案

【问题标题】：using the <set> tag in SVG to change the rotation of a shape使用 SVG 中的 <set> 标签来改变形状的旋转
【发布时间】：2012-04-09 06:00:09
【问题描述】：

我正在尝试使用标记设置形状的旋转角度，但对于我来说，我无法弄清楚。什么是正确的语法？

<set id="smallGearJump" 
         attributeName="transform" attributeType="XML" type="rotate" 
         to="110 100 100" begin="1s" dur="1.7s" />

编辑：澄清 - 我试图将其设置为特定角度一段时间，而不是在那里设置动画。我希望它从 0 旋转跳到 110（在上面的这个例子中）

【问题讨论】：

这应该工作，但它没有：<set attributeName="transform" to="rotate(110 100 100)" begin="1s" dur="1.7s"/>我需要做同样的事情，但无法弄清楚。

标签： animation svg transform smil

【解决方案1】：

您需要animateTransform 元素而不是animate。您可能需要根据需要修改 additive 和 fill 属性。

<animateTransform id="smallGearJump"
                attributeName="transform" attributeType="XML"
                type="rotate" to="110 100 100" dur="1.7s" begin="1s"
                additive="replace" fill="freeze" />

请参阅W3C 或MDN 的文档。

【讨论】：

animateTransform 不能用于零持续时间，因此它不是问题中所问的离散设置。

【解决方案2】：

这只是解决您的问题的方法。发现set的行为，当你给它错误的属性值时，它会触发onbegin事件并且对元素没有任何作用。因此，使用它，我为“to”属性提供了错误的属性值。因此 set 命令在2s 之后触发了开始事件，但没有对元素应用任何转换。然后，在 onbegin 事件处理程序中，我得到目标元素，在本例中是 id 为 c1 的矩形。然后我对其应用所需的转换。（围绕中心旋转 110。）

同样在5s 之后触发onend。在其中，我测试填充属性值，并决定是否恢复应用的转换。

这可能是一种解决方法，但是在开始值、持续时间值方面没有妥协。

还有

<set attributeName="transform" to="200" ... /> 在 x 目录中转换并设置行为

<set attributeName="transform" to="200 100" ... /> 将 x 目录中的 200 和 y 目录中的 100 转换为设置行为

但是找不到旋转的语法。

在这里放了一个小提琴http://jsfiddle.net/AA2tT/

【讨论】：

-1 问题并没有要求 Javascript 解决方案，而是要求以正确的声明方式突然更改变换属性，而无需任何动画。
值得注意的是，如果有人遇到问题，onend 和 onbegin 在某些 Chrome 和 Opera 版本中不会被触发。这有一个错误。

【解决方案3】：

我找不到满意的答案。

我终于这样编码了：

将原始元素放入<defs>
为元素制作两个<use>，一个带有额外的旋转，另一个没有
根据需要设置两个<use>在动画期间可见或隐藏

例子：

<defs>
  <path id="example" d="..."/>
</defs>
<use xlink:href="#example" visibility="hidden">
  <set begin="0s" end="1s" attributeName="visibility" to="visible"/>
</use>
<use xlink:href="#example" visibility="hidden" transform="rotate(110 100 100)">
  <set begin="1s" end="3s" attributeName="visibility" to="visible"/>
</use>

【讨论】：

【解决方案4】：

如果您希望动画从一种状态跳转到另一种状态，请指定 calcMode="discrete"。比如这样：

<animateTransform attributeName="transform" type="rotate" to="110 100 100" dur="1.7s" begin="1s"
            calcMode="discrete" />

【讨论】：

花了我一段时间，但我终于回到了这个。为答案喝彩。
attributeName="transform" 可能是必需的