未在 Base64 编码的 SVG 中呈现文本答案

【问题标题】：Text not being rendered in Base64 encoded SVG未在 Base64 编码的 SVG 中呈现文本
【发布时间】：2013-08-23 19:45:22
【问题描述】：

我正在使用

渲染 SVG 图像

<img src="data:image/svg+xml;charset=utf-8;base64," + src />

其中 src 是 Base64 编码的 SVG 图像。图片中的所有内容都正确显示，除了字段中的文本根本不显示。此问题存在于 Chrome 中，但不存在于 Internet Explorer 中。有关如何解决此问题的任何想法？

如果我右键单击显示的图片，下载它并在 Linux 的 Image Viewer 中查看，文本再次完美显示。

编辑：SVG 图像示例：

<svg width="700" height="220" title="test2" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text y="100" x="90" dy=".32em" text-anchor="end">
    12                
  </text> 
</svg>

【问题讨论】：

您可以将 svg 内容添加到您的问题中吗？
尝试提供字体大小属性。也许你正为此苦恼：bugs.webkit.org/show_bug.cgi?id=68090

标签： image svg base64

【解决方案1】：

在我的情况下是一个问题，a 将 <text> 创建为 document.createElement('text') 并且 svg 结果如下所示：

<svg xmlns="http://www.w3.org/2000/svg">
  <text xmlns y="100" x="90" dy=".32em" text-anchor="end">
     12                
  </text> 
</svg>

在使用 window.btoa() 编码为 base 64 后，文本也不会被渲染。在我的例子中，原因在text标签中的一个空的xmlns属性中。

解决方案：我使用document.createElementNS('http://www.w3.org/2000/svg', 'text') 创建了元素。它使用指定的命名空间 URI 和限定名称创建一个元素。

【讨论】：