SVG 文本 - 总长度根据缩放而变化
在 SVG（对于网络浏览器）中，如果我添加
假设我添加“mmmmmmmmmmmmmmmmmmmmmmmmmmA”作为文本，然后我想绘制一条与最后一个字符相交的垂直线（或其他精确定位的元素）。工作正常，但如果我缩小，文本会变得更短或更长，并且线条将不再在正确的位置与文本相交。错误可能高达 +/- 5 个字符宽度，这是不可接受的。错误也是不可预测的，150% 和 160% 缩放可以增加 3 个字符长度，而 155% 则缩短 2 个字符长度。
我的缩放是作为画布根元素（
我发现 textLength-attribute[1] 应该调整总长度，以便文本始终在我选择的位置结束，但它仅适用于 Webkit。 Firefox 和 Opera 似乎根本不关心这个值（还没有在 IE9 中尝试过）。
有没有什么方法可以渲染精确定位的文本，而无需诉诸自制的字体轮廓填充？
[1] http://www.w3.org/TR/SVG11/text。 html#TextElementTextLengthAttribute
更新
我正在使用的结构的片段
<svg>
<g transform="scale(1)"> <!--This is the root, i'm changing the scale of this element to zoom -->
<g transform="scale(0.014)"> <!--This is a wrapper for multi-line text, scaling, other grouping etc -->
<text font-size="1000" textLength="40000">ABDCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstxyzåäö1234567890</text>
</g>
</g>
In SVG (for web-browsers), if i add a <text>-element and add some text to it the total rendered width of the text string will change depending on the scale of the text.
Lets say i add "mmmmmmmmmmmmmmmmmmmmmmmmmmA" as text, then i want to draw a vertical line(or other exactly positioned element) intersecting the very last character. Works fine but if i zoom out the text will become shorter or longer and the line will not intersect the text in the right place anymore. The error can be as much as +/- 5 characters width which is unacceptable. The error is also unpredictable, 150% and 160% zoom can add 3 characters length while 155% is 2 charlengths shorter.
My zoom is implemented as a scale-transform on the root element of my canvas which is a <g>.
I have tried to multiply the font-size with 1000x and scale down equally on the zoom-transform and vice versa in case it was a floating point error but the result is the same.
I found the textLength-attribute[1] which is supposed to adjust the total length so the text always end where i choose but it only works in Webkit. Firefox and Opera seems to not care at all about this value (haven't tried in IE9 yet).
Is there any way to render text exactly positioned without resorting to homemade filling of font-outlines?
[1] http://www.w3.org/TR/SVG11/text.html#TextElementTextLengthAttribute
Update
Snippet of the structure i'm using
<svg>
<g transform="scale(1)"> <!--This is the root, i'm changing the scale of this element to zoom -->
<g transform="scale(0.014)"> <!--This is a wrapper for multi-line text, scaling, other grouping etc -->
<text font-size="1000" textLength="40000">ABDCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstxyzåäö1234567890</text>
</g>
</g>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有趣的是，自从 webkit 构建以来，我似乎在 textLength 上失败了（w3c 测试用例）。你能发布你的例子吗？
对于 Opera 来说，我们确实支持“textLength”属性，如此处。
您的另一个选择是使用 getBBox 方法 来找到一个好的绘制线条的位置，应该适用于所有浏览器。
Interesting, since the webkit builds I have seem to fail on textLength (w3c testcase). Could you post your example?
Speaking for Opera we do support the 'textLength' attribute, as documented here.
The other option you have is to use the getBBox method to find a good position for drawing your line, that should work in all the browsers.