Svg 使用textLength属性

我有一些文本片段，我想把它们放进一个固定的80px宽度，我正在寻找最好的方法来实现回退，如果它们不太合适，它们都会非常接近，所以我希望可以使用间距来进行更正

我查看了textLength属性的文档，但发现它很难理解，而且这个属性根本没有帮助。在文本元素上指定像素宽度会使Firefox中的文本变得混乱，而在我的Chrome中则没有任何作用

上的一篇文章以“em”为单位给出了一些例子，但我还没有找到任何官方文档来解释为什么在像素不起作用的情况下这种方法是有效的。在Firefox中使用这种方法很有帮助，尽管在tspan中它被忽略了，但在Chrome中却被完全忽略了

<svg width="570px" height="310px" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
text {
    text-anchor: middle;
    font-size: 13px;
    font-weight: bold;
    font-family: "Times New Roman";
}
</style>

<rect  x="115" y="180" width="80"  height="80" fill="white" stroke="black"/>
<text x="155" y="180"  textLength="80">
<tspan dy="1.2em" x="155" >Elizabeth</tspan>
<tspan dy="1.1em" x="155" >Taylor</tspan>
<tspan dy="1.1em" x="155" >(c1731&#x2013;1783)</tspan>
</text>
</svg>

---

有人能解释一下如何以可移植的方式使用它吗？

问题是，当存在元素时，textLength的行为在所有浏览器上都有一点缺陷

我认为Firefox的行为是正确的，如果您将所有元素都保留在默认位置，并且不移动它们，那么Firefox的行为是有意义的

在Firefox中查看此内容

正文{ 文本锚定：中间； 字体大小：13px； 字体大小：粗体； 字体系列：时代新罗马； } 伊丽莎白 泰勒 c1731&x2013；1783 伊丽莎白 泰勒 c1731&x2013；1783

---

问题在于，当存在元素时，textLength的行为在所有浏览器上都有一点缺陷

我认为Firefox的行为是正确的，如果您将所有元素都保留在默认位置，并且不移动它们，那么Firefox的行为是有意义的

在Firefox中查看此内容

正文{ 文本锚定：中间； 字体大小：13px； 字体大小：粗体； 字体系列：时代新罗马； } 伊丽莎白 泰勒 c1731&x2013；1783 伊丽莎白 泰勒 c1731&x2013；1783

---

谢谢你，保罗。我刚刚得出结论，Firefox正在将其应用于整个文本，但我仍然不明白为什么textLength=13em似乎能像我所希望的那样工作。我没有考虑过使用你描述的“文本”。与tspan相比，它的优点和缺点是什么？出于这个目的，我希望每个片段都由80px绑定？好的。刚刚尝试了所有的例子，看起来我误解了textLength的作用。它设置了一个固定的长度，而不是在文本太长时限制文本。最后一个例子，Paul，唯一一个在所有情况下都有效的例子，扩展了我的文本以修复矩形。我所要做的就是，如果文本超过了80px的限制，就稍微压缩一下。我怀疑是这样的。不幸的是SVG没有办法做到这一点。谢谢Paul。我刚刚得出结论，Firefox正在将其应用于整个文本，但我仍然不明白为什么textLength=13em似乎能像我所希望的那样工作。我没有考虑过使用你描述的“文本”。与tspan相比，它的优点和缺点是什么？出于这个目的，我希望每个片段都由80px绑定？好的。刚刚尝试了所有的例子，看起来我误解了textLength的作用。它设置了一个固定的长度，而不是在文本太长时限制文本。最后一个例子，Paul，唯一一个在所有情况下都有效的例子，扩展了我的文本以修复矩形。我所要做的就是，如果文本超过了80px的限制，就稍微压缩一下。我怀疑是这样的。不幸的是，SVG没有办法做到这一点。