svg - SVG：标记以任何 svg 元素为目标

Question

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

问题是：

• 如果我将xlink:href动画标签中的 但我不能在其他圈子上重复使用我的动画。

• 我无法xlink:href从<animate>标签中删除 并将其覆盖在 上 <use>，因为 <use>标签已经具有该属性（以动画为目标）。

• 最后，如果我将<use>我的动画作为<circle>标签的子项，则动画将不起作用。

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

编辑：我想在<use>. 例如：<use xlink:href="myAnim" cx="50" />或 <use xlink:href="myAnim" to="50" />

标签： svg

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>