Chrome SVGText Performance Issue

by Roman Bruckner

HTML

<svg width="500" height="400">
  <text x="50" y="50" fill="blue" text-anchor="middle">test1</text>
  <text x="100" y="100" fill="green" text-anchor="middle">test2</text>
  <text x="150" y="150" fill="red" text-anchor="middle">test2</text>
  <text x="200" y="200" fill="gray" text-anchor="middle">test2</text>  
  <rect id="rectangle" x="250" y="250" width="100" height="100" fill="white" stroke="black"/>
</svg>

JavaScript

document.getElementById('rectangle').addEventListener('click', function(evt) {
  evt.currentTarget.setAttribute('fill', `#${Math.floor(Math.random()*16777215).toString(16)}`);
});