
<html>

    <head>

      <base href="https://bugs.webkit.org/" />

    </head>

    <body>

      <p>

        <div>

            <b><a class="bz_bug_link 

          bz_status_RESOLVED  bz_closed"

   title="RESOLVED DUPLICATE - SVG text's transparent box overlaps clickable shape, disabling click"

   href="https://bugs.webkit.org/show_bug.cgi?id=150274#c2">Comment # 2</a>

              on <a class="bz_bug_link 

          bz_status_RESOLVED  bz_closed"

   title="RESOLVED DUPLICATE - SVG text's transparent box overlaps clickable shape, disabling click"

   href="https://bugs.webkit.org/show_bug.cgi?id=150274">bug 150274</a>

              from <span class="vcard"><a class="email" href="mailto:tobi&#64;tobireif.com" title="Tobi Reif &lt;tobi&#64;tobireif.com&gt;"> <span class="fn">Tobi Reif</span></a>

</span></b>

        <pre>This works now in the Safari preview. I deleted the pen. In case anyone needs to test this in the future, here's the code:


&lt;svg id=&quot;svg&quot; xmlns=&quot;<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>&quot; width=&quot;100%&quot; viewBox=&quot;0 0 300 60&quot;&gt;

  &lt;rect id=&quot;rect&quot; x=&quot;10&quot; y=&quot;5&quot; width=&quot;20&quot; height=&quot;20&quot; fill=&quot;lime&quot;&gt;

    &lt;animate attributeName=&quot;x&quot; begin=&quot;circle1.click;circle2.click;circle3.click&quot; dur=&quot;0.5s&quot; from=&quot;100&quot; to=&quot;10&quot; fill=&quot;freeze&quot;/&gt;

  &lt;/rect&gt;

  &lt;circle id=&quot;circle1&quot; cx=&quot;20&quot; cy=&quot;37&quot; r=&quot;5&quot; fill=&quot;green&quot;/&gt;

  &lt;circle id=&quot;circle2&quot; cx=&quot;80&quot; cy=&quot;37&quot; r=&quot;5&quot; fill=&quot;green&quot;/&gt;

  &lt;circle id=&quot;circle3&quot; cx=&quot;120&quot; cy=&quot;37&quot; r=&quot;5&quot; fill=&quot;green&quot;/&gt;

  &lt;text y=&quot;30&quot; fill=&quot;olive&quot; font-size=&quot;10&quot;&gt;

    &lt;tspan x=&quot;40&quot; dy=&quot;1em&quot;&gt;Foo.&lt;/tspan&gt;

    &lt;tspan x=&quot;40&quot; dy=&quot;1em&quot;&gt;Foo bar baz.&lt;/tspan&gt;

  &lt;/text&gt;

&lt;/svg&gt;</pre>

        </div>

      </p>

      <hr>

      <span>You are receiving this mail because:</span>

      
      <ul>

          <li>You are the assignee for the bug.</li>

      </ul>

    </body>

</html>