Question

我注意到以下网页无法在IE 11中正确呈现。它在Google Chrome中完美运行。

以下示例中标有“text-anchor：end”的文本元素未正确锚定在IE中的文本末尾。

看起来像使用textLength属性组合“text-anchor：end”属性会导致问题。删除textLength属性后，它将按预期运行。

我无法在线找到有关此问题的任何信息。这是一个已知的错误？有工作吗？

非常感谢任何帮助！

<svg height="1000" width="1150">

    <text text-anchor="start" textLength="200px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="80">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
    <text text-anchor="end" textLength="200px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="100">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>

    <text text-anchor="start" textLength="300px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="150">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
    <text text-anchor="end" textLength="300px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="170">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>

    <text text-anchor="start" textLength="500px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="220">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
    <text text-anchor="end" textLength="500px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="240">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>

</svg>

Answer 1

解决方法不是使用text-anchor：end（或middle），只是text-anchor：start。只有你必须计算起始位置，这很容易，因为你知道渲染文本的确切长度（你刚刚用textLength属性设置它），所以新的x值将是（old x - textLength）你打算在text-anchor：middle的情况下使用text-anchor：end或（old x - textLength / 2）。

Answer 2

作为一种解决方法，我不是依赖textLength和lengthAdjust属性来设置字体间距和字形大小，而是根据实际的字符串长度（以像素为单位）和可用空间的大小（在像素）。以下是我使用的代码。注意，我正在使用d3.js。

 var lTitleWidth = title[0][0].getBBox().width;
    if (lTitleWidth > lMaxTitleWidth) {
        var lFactor = lMaxTitleWidth / lTitleWidth;
        title.attr({ "font-size": parseInt(title.attr("font-size")) * lFactor });
    }

此解决方法不会提供完全相同的行为。由于字体大小现在变小了，字体高度也会降低，因此IE不会如此工作。

使用text-anchor和textLength属性时，Internet Explorer无法正确呈现svg文本

2 个答案: