动画独立重用svg

Question

我希望一些 SVG 在点击时生成动画。 SVG 被定义一次，并通过<use> 标签多次重复使用。 我写了以下代码：

svg {
  border: 1px solid #0af;
  stroke: black;
}

<svg display="none">
    <symbol id="tick" viewBox="0 0 100 100">
        <polyline points="15,50 40,75 85,25" style="stroke-width:10; fill:none; stroke-linecap:round; stroke-linejoin:round;" stroke-dasharray="120">
            <animate attributeName="stroke-dashoffset" from="120" to="0" dur="0.5s" fill="freeze" repeatCount="1" begin="click" />
        </polyline>
    </symbol>
</svg>

<svg><use href="#tick"/></svg>
<svg><use href="#tick"/></svg>
<svg><use href="#tick"/></svg>
<svg><use href="#tick"/></svg>

问题是，如果我单击一个 SVG，该 SVG 的所有实例都会被动画化，这不是我想要的。我希望他们独立制作动画。除了多次嵌入完整的 SVG 之外，最好的方法是什么？

Answer 1

您可以将您的svg 放在一个文件中，然后在文档树中访问它，如下所示：

<object data="tick.svg"></object>

Answer 2

您的问题是重复 ID

创建一个 Web 组件（所有现代浏览器都支持）注入您的一旦定义 SVG

<svg-tick id=ONE stroke="red"></svg-tick>
<svg-tick id=TWO></svg-tick>
<svg-tick id=THREE></svg-tick>
<svg-tick id=FOUR stroke="blue"></svg-tick>

您可以添加更多 Web 组件的好东西，例如属性和单击处理程序...

我将折线改为path，使用pathLength=100 更容易，无需计算

id 不是必需的，您也可以使用"ID"+new Date()/1 生成唯一值

<style>
  svg {
    border: 1px solid #0af;
    stroke: green;
    width: 120px;
    cursor:pointer;
  }
  #TWO svg { stroke: goldenrod;   }
</style>

<svg-tick id=ONE stroke="red"></svg-tick>
<svg-tick id=TWO></svg-tick>
<svg-tick id=THREE></svg-tick>
<svg-tick id=FOUR stroke="blue"></svg-tick>
<script>
  customElements.define('svg-tick', class extends HTMLElement {
    connectedCallback() {
      let id = this.id;
      let stroke = this.hasAttribute("stroke") 
                        ? ` stroke=${this.getAttribute("stroke")} ` 
                        : "";
      this.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path id="${id}" d="M15,50 40,75 85,25" pathLength="100" 
        stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round" 
        stroke-dasharray="100" ${stroke}/>
    <animate id="${id}" attributeName="stroke-dashoffset" from="100" to="0" 
           dur="0.5s" fill="freeze" repeatCount="1" begin="click" />
</svg>`;
      this.onclick = (evt) => console.log('clicked',id);
    }
  });
</script>