我有一些文本段希望设置为固定的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–1783)</tspan>
</text>
</svg>
Run Code Online (Sandbox Code Playgroud)
有人可以解释如何以便携式方式使用它吗?
svg ×1