在SVG文本方面,是否有其他字母间距的替代方案?
此代码在Chrome上运行,但在Firefox上不运行:
https://developer.mozilla.org/de/docs/Web/CSS/letter-spacing
正如你所看到的,由于一个错误,Firefox现在不支持它。但我真的需要两个浏览器中的字母间距。那么,对于SVG文本,有一个好的原生语言吗?
顺便说一句,字间距也是如此。可以完美地在Chrome中工作,但不能在Firefox上工作。
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>
您可以使用参数"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>
我的解决方案是在QGIS中创建带有(多个)空白的字符串。这是一种糟糕的方式,因为如果你想给所有元素一个更大的空间,这需要很长时间。
但它很简单,在任何浏览器上都能以同样的方式工作。因此,如果您的数据是geojson或topojson,这就是方法。
运行良好。在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>
Firefox(桌面)现在支持letter-spacing
属性,从版本73开始。请参阅MDN页面上的浏览器兼容性和相关的bugzilla。
Firefox for Android仍然不支持letter-spacing
。