SVG letter-spacing also applied to Mozilla Firefox

Question

Is there another alternative to letter-spacing in terms of SVG text?

This code is working on Chrome but not on Firefox:

https://developer.mozilla.org/de/docs/Web/CSS/letter-spacing

As you can see there Firefox is not supporting it right now due to a bug. But I really need letter-spacing in both browser. So is there a good anternative for SVG text?

Btw the same is on word-spacing. Working in Chrome perfectly but not on Firefox.

Answer 1

An alternative to letter-spacing that does work on Firefox is the textLength property. Perhaps that will suit you as a workaround?

<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example text01 - 'Hello, out there' in blue</desc>

  <text x="250" y="150" 
        font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
  </text>

  <text x="250" y="200" textLength="600"
        font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

Answer 2

You can use the parameter "dx".

<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

    <text x="250" y="200" dx="0 20 20 20 20 0 20 20 20 20 20"
        font-family="Verdana" font-size="55" fill="blue" >
         Hello, out there
    </text>
</svg>