Question

我正在使用

渲染SVG图像

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

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

如果我右键单击显示的图片，下载并在Linux的图像查看器中查看，文本将再次显示。

编辑：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>

Answer 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 之后，文本也没有被呈现。就我而言，原因是在 xmlns 标记中的空 text 属性中。

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

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

1 个答案: