Question

我正在尝试使用＆lt; set＆gt;设置形状的旋转角度标签，但对于我的生活，我无法弄明白。什么是正确的语法？

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

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

Answer 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处的文档。

Answer 2

这只是解决问题的方法。发现set的行为，当您给出错误的属性值时，它会触发onbegin事件并对该元素不执行任何操作。因此，使用它，我为“to”属性提供了错误的属性值。因此set命令会在2s之后触发begin事件，但不会对该元素应用任何转换。然后，在onbegin事件处理程序中，我得到目标元素，在这种情况下是标识为c1的rect。然后我将所需的变换应用到它。（围绕中心旋转110。）

同样在5s之后触发。在其中，我测试fill属性值，并决定是否还原应用的转换。

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

另外

<set attributeName="transform" to="200" ... />使用设置行为转换为x dir

<set attributeName="transform" to="200 100" ... />使用设置行为

在x dir和100 d y dir中翻译200

但是找不到旋转的语法。

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

Answer 3

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

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

Answer 4

我找不到满意的答案。

我最终将其编码为：

将原始元素放在<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>

使用SVG中的<set>标签来更改形状的旋转</set>

4 个答案: