IE10 和 11 渲染问题与 SVG 文本和 textLength 属性
IE10 & 11 rendering issue with SVG text and textLength attribute
我有通过将 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>
微软的回应是
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);
}
text {
cursor: default !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
添加这个 css 对我有用,我试过你的例子,它也有效
我有通过将 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>
微软的回应是
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);
}
text {
cursor: default !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
添加这个 css 对我有用,我试过你的例子,它也有效