CHROME TEXT BUG

`dy` positioned <tspan/> does not update properly when container element font-size changes

by Roman Bruckner

HTML

<button id="font-change">change the first text font-size to match the second</button>
<svg width="300" height="200">
  <text id="svg-text" x="50" y="50" font-size="20">
    <tspan dy="0">FontSize: 20</tspan>
    <tspan x="50" dy="1em">1. text</tspan>
  </text>
  
   <text id="svg-text" x="50" y="150" font-size="40">
    <tspan dy="0">FontSize: 40</tspan>
    <tspan x="50" dy="1em">2. text</tspan>
  </text>
  
</svg>

JavaScript

document.getElementById('font-change').addEventListener('click', function() {
	document.getElementById('svg-text').setAttribute('font-size', 40);
}, false)