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

Question

我有一个 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>

这里是预期的输出

问题

Edge 和 IE 不显示第一个和第二个 img-svg，其中包含带有扩展 ASCII 字符和 HTML 数字的文本。 Firefox 和 Chrome 显示 img-svg
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 元素）在所有浏览器中显示

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

浏览器版本

边 44.18362.449.0
IE 11.592.18362.0
火狐 73.0.1 64 位
Chrome80.0.3987.132 64位

在 Windows 10 pro 64 位

上测试

Answer 1

IE seems not to display any img-svg.

IE 对 SVG 很严格，因此我们应该在 Internet Explorer 中使用 SVG 时优化数据 url。

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

所以如果你把第3个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，它是 Trident 的一个分支。基于Chromium的新Edge可以正确显示所有svgs。

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

Why do Edge and IE not display this img-embedded-svg with text that has extended ASCII characters?

html

svg

microsoft-edge