svg - 使用 textLength 属性

Question

我有一些文本段想放入固定的 80px 宽度，如果它们不太合适(它们都非常接近所以我希望间距可用于进行更正)。

我查看了 textLength 属性的文档，但发现它很难理解——而且 examples一点帮助都没有。在文本元素上指定像素宽度会使 Firefox 中的文本出现乱码，而在我的 Chrome 中则没有任何作用。

More Robust SVG Text 上的一篇文章以“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> elements 在所有(？)浏览器上都存在一些问题。

我认为 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>

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

也许你想要每个<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>