Question

我想在我的<animate>中定义一个<defs>标签，以在页面中的多个<circle>上使用它。

问题是：

如果我将animate标记中的xlink:href设置为目标我的一个圆，并且我将目标定为我的动画：圆正在设置动画； 但是我不能在其他圈子上重复使用我的动画。
我无法从xlink:href标记中删除<animate>并将其覆盖在<use>上，因为<use>标记已经具有该属性（定位动画）。
最后，如果我将动画的<use>放在<circle>标签的子元素中，则该动画无效。

所以我的问题是：有没有办法在各种SVG元素上重用<animation>标签？

编辑：我想在<use>中定义动画的一些参数。例如：<use xlink:href="myAnim" cx="50" />或<use xlink:href="myAnim" to="50" />

Answer 1

如果您打算在多个圆上使用相同的动画，为什么不将动画圆放入<defs>中并使用该圆呢？

svg{border:1px solid}

<svg viewBox = "0 0 100 100" width="200">
  <symbol viewBox="0 0 10 100" id="c">
  
  <circle r="5" cy="35" cx="5" >
       <animate 
       attributeName="cy"
       attributeType="XML"
       values="35;95;35"
       dur="5s"
       repeatCount="indefinite"/>
  </circle>
  </symbol>
  
  <use xlink:href="#c" fill="red" width="10" />
  <use xlink:href="#c" fill="gold" width="5"  x="20" />
  <use xlink:href="#c" fill="skyblue" width="7"  x="40" />
</svg>

SVG：<refs>中的<animate>标签以任何svg元素为目标

1 个答案: