SVG-интервал между буквами также для firefox

есть ли другая альтернатива интервал между буквами С точки зрения SVG text?

этот код работа с Chrome но не on Firefox:

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

Как вы можете видеть, Firefox не поддерживает его прямо сейчас из-за ошибки. Но мне действительно нужен интервал между буквами в обоих браузерах. Так что есть хороший anternative для текста SVG?

кстати то же самое на слово-интервал. Отлично работает в Chrome, но не в Firefox.

9
css firefox google-chrome svg text

3 ответов

альтернатива letter-spacing это работает на Firefox-это textLength собственность. Возможно, это подойдет вам в качестве обходного пути?

<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>
14

вы можете использовать параметр "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>
4

мое решение состояло в том, что я создаю строки с (несколькими)пробелами в QGIS. Это плохой способ, потому что если вы хотите дать всем элементам большее пространство, это займет много времени.

но это легко и работает на любом браузере одинаково. Так что это путь, если у вас есть данные в geojson или topojson.

1