The first SVG here is not clickable, what did I do wrong?

1

Code:

            <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <g id="play">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </g>
            </svg>
            <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use xlink:href="#play" />
            </svg>
2

You got the SVG in the first element twice - one time without event listener. When I deleted the redundant one from the inspector, it worked. Didn’t further investigate where the second one comes from.

image
image770×246 27.1 KB

3

ok, so then, all I would do is delete class="alpha"

From here? and that’s it?
https://jsfiddle.net/unxq19bd/


           <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <g id="play">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </g>
4

Cool, looks like you fixed it.