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 =＆＃34; scale（scaleX）＆＃34;到你的文本元素并删除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＆amp; 11使用SVG text和textLength属性渲染问题

2 个答案: