使用textLength属性

Question

我有一些文本段希望设置为固定的80px宽度，并且我正在寻找最好的方法来实现后备广告（如果它们不合适）（它们都将非常接近，因此我希望间距可以用于进行更正）。

我查看了textLength属性的文档，但发现它很难理解- 示例完全没有帮助。在文本元素上指定像素宽度会使Firefox中的文本乱码，而在我的Chrome中什么也不做。

“ 更强大的SVG文本”中的一篇文章以“ 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>

有人可以解释如何以便携式方式使用它吗？

Answer 1

问题在于，在所有（？）浏览器上，textLength何时存在<tspan>元素的行为都存在一些错误。

我认为Firefox的行为是正确的，并且如果将所有<tspan>元素都保留在默认位置并且不移动它们，这是有道理的。

（在Firefox中查看）

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

<text x="155" y="180" textLength="80">
<tspan>Elizabeth</tspan>
<tspan>Taylor</tspan>
<tspan>(c1731&#x2013;1783)</tspan>
</text>
</svg>

它正在调整所有文本的大小，以使其总长度为80px。

也许您希望每个<tspan>长度为80px？你不说 之所以没有发生，是因为textLength它不是样式属性。因此，它不是<tspan>元素继承的。如果需要，您必须在每个上设置该属性<tspan>。

<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">
<tspan dy="1.2em" x="155" textLength="80">Elizabeth</tspan>
<tspan dy="1.1em" x="155" textLength="80">Taylor</tspan>
<tspan dy="1.1em" x="155" textLength="80">(c1731&#x2013;1783)</tspan>
</text>
</svg>

不幸的是，这目前仅适用于Chrome，不适用于Firefox。

基本上看来，Chrome仅喜欢textLength在叶子元素上使用。Firefox仅在其父文本元素上喜欢它。

您没有确切说出想要的内容，但是我的建议是，如果您希望行为在所有浏览器上都匹配，则避免在每行中<tspan>使用适当的<text>元素。

（以下示例在Chrome和Firefox上看起来相同）

<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" dy="1.2em" textLength="80">Elizabeth</text>
<text x="155" y="180" dy="2.3em" textLength="80">Taylor</text>
<text x="155" y="180" dy="3.4em" textLength="80">(c1731&#x2013;1783)</text>
</svg>