Межсимвольный интервал SVG также применяется к Mozilla Firefox

Есть ли другая альтернатива буквенному интервалу в терминах текста SVG?

Этот код работает в Chrome, но не на Firefox:

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

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

Btw то же самое на расстоянии между словами. Работа в Chrome отлично, но не в Firefox.

Ответы

Ответ 1

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

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

Ответ 2

Альтернативой 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>

Ответ 3

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

Это работало fine-. Только в Internetexplorer возникли проблемы с двумя строками текста, поэтому Leterspacing в реальных браузерах, таких как Chrome (√), Safari (√) и IE (√). Только Firefox...

<svg fill="none" stroke="#838383" stroke-width="1" class="text-line"  width="100%" height="400">
                        <text fill="none" transform="translate(1 1)" textLength="1200"  >
                                <tspan x="0" y="192"><?php  the_field('ani_headline_1st');  ?></tspan>  
                                <tspan x="0" y="342"><?php  the_field('ani_headline_2nd');  ?></tspan>  
                        </text>