Edge 浏览器中 src 属性中带有 SVG 的奇怪图像

Question

我正在渲染图像并将 svg 文件作为源属性传递给图像。它适用于除 Edge 之外的所有浏览器。我找不到它呈现这个带有十字的奇怪黑框的原因：

Html 代码如下：<img width="3029" height="3920" id="id_of_image" src="data:image/svg+xml;charset=utf-8,<svg xmlns=....................CONTENT OF SVG............></svg>"/>

如何在边缘显示这种图像？我正在从 JS 中填充 src 属性，其中我将元素作为字符串。我需要将它放入图像属性中，但问题是这怎么可能？

Answer 1

svg 代码不适用于 svg 图像。如果不使用图像标签，您可以直接在 html 代码中使用 svg 标签。或者.

您可以创建一个*.svg扩展名的svg文件，并将文件名设置为图像属性中的src。

Answer 2

问题已解决。问题是，在 Edge 中，当您直接在属性中使用标签时，渲染 svg 会出现问题。所以解决方案是在 JS 中替换和转换字符串。当您有 SVG 字符串时，我创建了一个函数来为来自 ajax 请求的图像生成 SVG 属性：

function fixSVGDiagram(svgString)  {
    svgString = svgString.replace("<![CDATA[", "").replace("]]>", ""); //If styles occured, Edge crashes on that

    svgString = svgString.replace(/#/g,"temporaryhash") //Because of hasthag issues (in styles)

    svgString = encodeURI(svgString) //Magic  happens

    svgString = svgString.replace(/temporaryhash/g, "%23") //Get back  hashtag

    return "data:image/svg+xml;charset=utf-8," + svgString
}

如果您在 ajax 请求中将 SVG 作为属性加载，那么您可以将其存储为字符串：

svgData = (new XMLSerializer).serializeToString(responseData);

然后

var  img = new Image
img.src = fixSVGDiagram(svgData)

你可以把图片放在你想要的地方。

Edge 浏览器中 src 属性中带有 SVG 的奇怪图像

Weird Image with SVG in src attribute in Edge browser

html

microsoft-edge