I want some SVGs to animate on click. The SVG is defined once and has been reused multiple times with the `<use>` tag.
I wrote the following code:

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

```html
<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>
```

The problem is, if I click on a single SVG, all the instances of that SVG are getting animated, which is not what I want. I want them to animate independently. What is the best way to do this other than embedding the complete SVG multiple times?