2

我正在使用渲染 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>
4

1 回答 1

0

在我的情况下是一个问题，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>

并且在使用文本编码到 base 64 之后window.btoa()也没有被渲染。在我的情况下，原因是标签中的一个空xmlns属性。text

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

于 2021-07-13T11:48:06.157 回答