Question

在SVG（对于网络浏览器）中，如果我添加一个<text> - 元素并向其添加一些文本，则文本字符串的总渲染宽度将根据文本的比例而改变。

假设我将“ mmmmmmmmmmmmmmmmmmmmmmmmmmA ”添加为文本，然后我想绘制一条与最后一个字符相交的垂直线（或其他精确定位的元素）。工作正常但如果我缩小文本将变得更短或更长，并且该行将不再与正确位置的文本相交。错误可能多达+/- 5个字符宽度，这是不可接受的。错误也是不可预测的，150％和160％缩放可以增加3个字符长度，而155％缩短2个字符。

我的缩放是在我的画布的根元素上实现的缩放变换，即<g>。我试图将字体大小乘以1000x并在缩放变换上同等缩小，反之亦然，以防它是浮点错误，但结果是相同的。

我找到textLength - 属性[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>

Answer 1

有趣的是，因为webkit构建我似乎在textLength（w3c testcase）上失败了。你能发贴你的例子吗？

对于Opera，我们支持'textLength'属性，如文档here所示。

您拥有的另一个选择是使用getBBox method找到一个好的位置来绘制您的线，这应该适用于所有浏览器。

SVG文本 - 总长度根据缩放而变化

1 个答案: