Chrome SVGText Bug

by Roman Bruckner

HTML

<svg width="700" height="300" xmlns="http://www.w3.org/2000/svg">
  <style>
  
    text:hover {
      fill: red
    }

    text {
      font-family: sans-serif;
      /* this is causing the issue */
      pointer-events: bounding-box;
    }

  </style>

  <text x="250" y="10" font-size="14">Hover here! Am I a copy of the tspan's bounding box?</text>

  <text font-size="30" y="80" x="20">
    <!-- the bounding box is fine without the TSPAN -->
    This is a <tspan fill="blue">tspan</tspan> inside a text.
  </text>

</svg>

JavaScript

Array.from(document.getElementsByTagName('text')).forEach(el => {
	el.addEventListener('click', evt => alert(evt.currentTarget.textContent));
});