SVG 字母间距也适用于 Mozilla Firefox

Posted 2023-03-06

【中文标题】SVG 字母间距也适用于 Mozilla Firefox

【英文标题】：SVG letter-spacing also applied to Mozilla Firefox

【发布时间】：2015-04-23 01:20:00

【问题描述】：

就 SVG 文本而言，还有其他 letter-spacing 替代方案吗？

此代码在 Chrome 上运行，但在 Firefox 上不：

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

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

顺便说一句，字间距也是如此。在 Chrome 中完美运行，但在 Firefox 上却不行。

【问题讨论】：

您可以使用 dx 或 x 为每个字母指定一个位置，或者您可以在我开始的错误中完成补丁。

能否请您链接到补丁。我找不到它。

bugzilla.mozilla.org/show_bug.cgi?id=371787

是的，这就是错误描述。好的，当您说补丁时，您的意思是解决方法。好吧，我想我错了。

我的意思是下载这个补丁：bug371787.bugzilla.mozilla.org/attachment.cgi?id=8334130 并修复其中阻止它被添加到壁虎代码库的问题。

【参考方案1】：

letter-spacing 在 Firefox 上运行的替代方法是 textLength 属性。也许这适合您作为一种解决方法？

<svg   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"  
        fill="none" stroke="blue" stroke- />
</svg>

【讨论】：

好主意，但不知道我是如何让它工作的。我的意思是我没有简单的文本元素。我有 这是要写入文本的行。然后我有 ***.com/questions/28320514/… 有一个 jsfiddle。也许只是在那里编辑它，以便我更好地了解要更改的内容。非常感谢。

所以我在 textpath .style("textLength", 600) 和 .attr("textLength", 600) 上进行了测试，没有变化。但是当我在文本 .attr("textLength", 600) 上设置它时，我会对所有文本元素进行更改。但我不想要它所有=/

我的意思是 textLength 只是进行拉伸的一种方式 (commons.oreilly.com/wiki/index.php/SVG_Essentials/Text)。我已经尝试了所有我想的。但是，如果我在已经存在的路径上绘画，我该如何使用它？

你从来没有提到你在路径上做文本。无论如何，textLength 应该仍然有效。见：jsfiddle.net/1off23q9

我偶然发现了这一点，因为我无法让 kerning 或 letter-spacing 在 svg 元素的样式标签中工作。 textLength 确实有效，但不是我希望的解决方案。我直接在text 标签的样式属性中尝试了letter-spacing，它起作用了。不知道为什么它以这种方式工作，而不是在 svg 的样式标签内。 <text style="letter-spacing: 2;">...</text>

【参考方案2】：

您可以使用参数“dx”。

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

【讨论】：

实际上对我有用的唯一方法。但是，尽管这确实适用于 Firefox，但它可能会破坏其他浏览器（如 Chrome）中的布局，这些浏览器也会评估字母间距。所以你需要结合字母间距设置和 dx 才能最终得到一个跨浏览器的解决方案。

【参考方案3】：

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

但它很简单，并且可以在任何浏览器上以相同的方式运行。因此，如果您将数据保存在 geojson 或 topojson 中，这就是您要走的路。

【参考方案4】：

这工作正常-。仅在 Internetexplorer 中出现 2 行文本的问题 - 因此在 Chrome (√)、Safari (√) 和 IE (√) 等实际浏览器中使用 Leterspacing。只有火狐...

<svg fill="none" stroke="#838383" stroke- class="text-line"   >
                        <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>

【参考方案5】：

Firefox（桌面）现在支持 letter-spacing 属性，从版本 73 开始。查看浏览器兼容性the MDN page 和相关的bugzilla。

Firefox for android 仍然不支持letter-spacing。