IE10 和 11 渲染问题与 SVG 文本和 textLength 属性

Question

我有通过将 AI 文件转换为 SVG 创建的 SVG 文件。它们包含周围有矩形的文本元素。为了使文本显示正确的高度和宽度，使用了 textLength 属性。当您与 IE 10 和 11 中的文本元素交互时，文本会调整为没有 textLength 属性时的大小。这在 IE 9 或 Edge 或 Chrome.

中不会发生

简单示例https://jsfiddle.net/Jeff672/zze9xroo/ 将鼠标悬停在 IE 10 或 11 中的文本上你会看到问题。

Correct and incorrect text display

完整 Html

<!DOCTYPE html>
<html>
<head>
<style>
    text:hover { cursor: pointer; }
    </style>
</head>
<body>
    <svg id="svgGraphic" xmlns="http://www.w3.org/2000/svg" width="600"
         height="200" viewBox="0 0 600 200">
    <rect x="5" y="10" height="52" width="510" style="fill:aliceblue; 
          stroke:red;" />
    <text x="10" y="50" textLength="500" font-size="50"
          style="font-family: Arial,san-serif; fill: #000000;" >
           Testing Internet Explorer</text>
     </svg>
</body>
</html>

Answer 1

微软的回应是

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7256245/

您好，感谢您向我们提供反馈。我们不再处理 IE 功能错误，除非它们与安全相关。因此，该项目将被关闭为无法修复。

我解决这个问题的方法是将 textLength 属性转换为变换比例。

在不考虑 textLength 属性的情况下获取实际文本长度（下面的 MeasureString 不考虑样式）

scaleX = 将 textLength 属性中的值除以实际文本长度。

将 transform="scale(scaleX)" 添加到文本元素并删除 textLength 属性。

public static System.Drawing.SizeF MeasureString(XElement element, bool ignoreTextLengthAttribute = false)
{
        if (element == null || string.IsNullOrWhiteSpace(element.Value))
            return new System.Drawing.SizeF();

        // NOTE: presentation attributes have less weight that style
        double fontSize = 12;
        if (element.Attribute("font-size") != null)
        {
            double doubleOut = 0;
            if (double.TryParse(element.Attribute("font-size").Value, out doubleOut))
                fontSize = doubleOut;
        }

        FormattedText ft = new FormattedText
        (
            element.Value,
            CultureInfo.CurrentCulture,
            FlowDirection.LeftToRight,
            new Typeface("Arial"),
            fontSize,
            Brushes.Black
        );

        if (!ignoreTextLengthAttribute && element.Attribute("textLength") != null)
            ft.MaxTextWidth = double.Parse(element.Attribute("textLength").Value);



        return new System.Drawing.SizeF((float)ft.Width, (float)ft.Extent);
}

Answer 2

text {
      cursor: default !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

添加这个 css 对我有用，我试过你的例子，它也有效

IE10 和 11 渲染问题与 SVG 文本和 textLength 属性

IE10 & 11 rendering issue with SVG text and textLength attribute

svg

internet-explorer-11

internet-explorer-10