时间戳

首页 > 解决方案 > 为什么 Edge 和 IE 不显示带有扩展 ASCII 字符的文本的 img-embedded-svg？

html - 为什么 Edge 和 IE 不显示带有扩展 ASCII 字符的文本的 img-embedded-svg？

问题描述

我有一个 HTML 页面，在 img 元素中有一个 SVG。在 Chrome 和 Firefox 中会显示 img-svg。但不是在 Edge 和 IE 中。我已将其范围缩小到 SVG 中的文本。文本具有扩展的 ASCII 字符（即 ASCII 码 >= 128）。

这里是示例 HTML

	<!DOCTYPE html>
	<html lang="en">

	<head>
	  <meta charset="utf-8">
	</head>

	<body id="easykat-app">
	  <!--  1. img-svg with extended ASCII -->
	  <img
		src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    <text x="0" y="15">1 Çüéâ</text>   </svg>'>

	  <hr />

	  <!-- 2. img-svg with HTML Numbers -->
	  <img
		src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    <text x="0" y="15">2 &#199; &#252; &#233; &#226; </text>   </svg>'>

	  <hr />

	  <!-- 3. img-svg with no extended ASCII -->
	  <img
		src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">      <text x="0" y="15">3 @ABCD</text>    </svg>'>

	  <hr />

	  <!-- 4. svg with  extended ASCII -->
	  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" width="50" height="50"
		xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
		<text x="0" y="15">4 Çüéâ</text></svg>

	</body>

	</html>

这里是预期的输出

预期的

问题

  1. Edge 和 IE 不显示第一个和第二个 img-svg，其中包含带有扩展 ASCII 字符和 HTML 数字的文本。Firefox 和 Chrome 显示 img-svg
  2. IE 似乎不显示任何 img-svg。

这里是 Edge 的输出

边缘错误

这是第一个有问题的 img-svg

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    <text x="0" y="15">1 Çüéâ</text>   </svg>'>

我尝试过使用 HTML 数字，即

	  <!-- 2. img-svg with HTML Numbers -->
	  <img
		src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    <text x="0" y="15">2 &#199; &#252; &#233; &#226; </text>   </svg>'>

这同样适用于 Chrome 和 Firefox，但不适用于 Edge 和 IE。

第 4 个 SVG（只有一个 svg 元素，没有 img 元素）在所有浏览器中显示

任何人都可以帮助理解这个问题吗？

浏览器版本

  1. 边缘 44.18362.449.0
  2. 即 11.592.18362.0
  3. 火狐 73.0.1 64 位
  4. Chrome80.0.3987.132 64bit

在 Windows 10 pro 64bit 上测试

标签： htmlsvgmicrosoft-edge

解决方案

IE 似乎不显示任何 img-svg。

IE 对 SVG 是严格的，所以在 Internet Explorer 中使用 SVG 时我们应该优化数据 url。

  • 大多数浏览器对charset=字符串很宽容，但 Internet Explorer 需要它。这意味着您需要使用;charset=utf8,而不是;utf8,.
  • 您必须对不是 URL 安全的字符进行百分比编码。例如，<svg>对%3Csvg%3E。'您可以通过使用单引号而不是双引号来最小化需要完成的百分比编码量"。

所以如果你把第三个 img-svg 改成下面这样，它可以在 IE 中很好地显示：

<img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50' height='50' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E    %3Ctext x='0' y='15'%3E3 @ABCD%3C/text%3E   %3C/svg%3E">

但是对于第一个和第二个 svg，它们仍然无法在 IE 和 Edge 中显示。似乎 IE 和 Edge 不支持显示扩展 ASCII 的 img-svg。这可能与浏览器的渲染引擎有关，例如 IE 使用 Trident，Edge Legacy 使用 EdgeHTML，EdgeHTML 是 Trident 的一个分支。基于 Chromium 的新 Edge 可以正确显示所有 svg。

推荐阅读