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

问题在于<tspan>元素存在时<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–1783)</tspan> </text> <text x="155" y="180" textLength="80"> <tspan>Elizabeth</tspan> <tspan>Taylor</tspan> <tspan>(c1731–1783)</tspan> </text> </svg>元素保留在默认位置，并且不移动它们，则有意义。

（在Firefox中查看）

<tspan>

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

也许您希望每个textLength长度为80px？你不说。没有发生的原因是因为<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–1783)</tspan> </text> </svg>上设置该属性。

textLength

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

基本上，Chrome浏览器只有<tspan>才会出现在叶子元素上。 Firefox只在父文本元素上才喜欢它。

您没有准确说出您想要的内容，但我的建议是避免<text>并为每一行使用正确的<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–1783)</text> </svg>元素，如果您希望所有浏览器都能匹配该行为。< / p>

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

BHP

使用textLength属性

1 个答案: