SVG 文本的最后一个字母在 Firefox 中被剪切答案

【问题标题】：Last Alphabet of SVG text is cutting in FirefoxSVG 文本的最后一个字母在 Firefox 中被剪切
【发布时间】：2023-01-13 02:24:32
【问题描述】：

我有这个简单的 SVG，里面有文本，在 chrome 和 Safari 上它工作正常，但在 FIREFOX 上，文本的最后一个字母根本没有显示。（在这种情况下，来自“atul”的“l”未在 Firefox 上显示。）

<svg viewBox="0 0 100 100" height="250" width="250">
  
    <path id="p1" d="M50 10 a 40 40 1 1 0 1 0" pathLength="1.99" style="fill: red;"></path>    
  <text font-size="6" text-anchor="middle">
    <textPath href="#p1" startOffset="1" side="center" style="letter-spacing:1px;font-weight:600;text-transform:uppercase; dominant-baseline: ideographic;">Atul</textPath>    
  </text>
</svg>

只需将此 svg 复制并粘贴到您的 HTML 中，然后尝试在 Firefox 中呈现它。

如果有人可以解释，我想了解问题以及解决方案。

提前致谢。

【问题讨论】：

看起来像 textPath 中的 Firefox 错误 - 只需在最后一个字母后添加一个空格，一切都会正常显示。
举报to bugzilla
@MichaelMullany，是的，它已经解决了这个问题并且已经用这个技巧修复了，但我也想了解原因。
与您的问题无关的观察结果：您可以使用 startOffset="50%" 而不是 pathLength 而不是 pathLength="1.99" 和 startOffset="1"

标签： html svg firefox

【解决方案1】：

我无法解释这一点，但这里我有三个不同的 SVG 元素。前两个是我从你的 sn-p 复制的代码的修改版本。他们都有问题。最后一个是the example on MDN的编辑版本。因此，示例 2 和 3 是我编写代码的方式——对大多数样式使用 SVG 属性，但最重要的是 pathLength 应该具有更大的值以避免任何渲染问题。

即使我从示例 1 中删除了所有可能的属性和样式，它仍然存在问题。正如我所见，示例 2 和示例 3 是完全相同的代码（除了引用路径的 id），所以我无法解释其中的区别。

如果有人能发现差异，请发表评论。

好吧，尝试重写你的代码......?

<svg viewBox="0 0 100 100" width="200" height="200">
  <path id="p1" fill="none" d="M50 10 a 40 40 1 1 0 1 0 z"/>
  <text>
    <textPath href="#p1">Atul</textPath> 
  </text>
</svg>

<svg viewBox="0 0 100 100" width="200" height="200">
  <path id="p2" fill="red" d="M50 10 a 40 40 1 1 0 1 0 z"
    pathLength="100"/>
  <text font-size="6" font-weight="600" text-anchor="middle"
    dominant-baseline="ideographic"
    style="text-transform: uppercase;letter-spacing:1px;">
    <textPath href="#p2" startOffset="50">Atul</textPath> 
  </text>
</svg>

<svg viewBox="0 0 100 100" width="200" height="200">
  <path id="p3" fill="red" d="M50 10 a 40 40 1 1 0 1 0 z"
    pathLength="100"/>
  <text font-size="6" font-weight="600" text-anchor="middle"
    dominant-baseline="ideographic"
    style="text-transform: uppercase;letter-spacing:1px;">
    <textPath href="#p3" startOffset="50">Atul</textPath>
  </text>
</svg>

【讨论】：