SVG 字母间距也适用于 Mozilla Firefox

Question

在 SVG 文本 方面，是否还有 字母间距 的另一种选择？

此代码适用于 Chrome 但 不适用于 Firefox：

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

如您所见，由于存在错误，Firefox 现在不支持它。但我真的需要在两个浏览器中使用字母间距。那么 SVG 文本有好的替代品吗？

顺便说一句，字间距也是如此。在 Chrome 中完美工作，但在 Firefox 中不完美。

Answer 1

letter-spacing 的替代方法是 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>

Answer 2

我的解决方案是在 QGIS 中创建带有（多个）whitespace 的字符串。这是不好的方法，因为如果你想给所有元素一个更大的 space 需要很长时间。

但这很简单，而且在任何浏览器上都以相同的方式工作。因此，如果您的数据在 geojson 或 topojson 中，这就是方法。

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

Answer 4

这工作正常-。在 Internetexplorer 中只有 2 行文本有问题 - 所以在 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>

Answer 5

Firefox（桌面）现在支持 letter-spacing 属性，从版本 73 开始。请参阅浏览器兼容性 the MDN page and the relevant bugzilla。

Android 的 Firefox 仍然不支持 letter-spacing。

SVG 字母间距也适用于 Mozilla Firefox

SVG letter-spacing also applied to Mozilla Firefox

css

firefox

svg

text

google-chrome