通过 DOMParser SVG 命名空间将 SVG 字符串渲染到 DOM

问题描述 投票：0回答：2

我试图从字符串中解析 SVG 元素并将其渲染到 DOM 中，但是当我解析为 

image/svg+xml
时，
<svg>
会以某种奇怪的方式附加到 DOM 中，但不会渲染它（至少在火狐）。当我解析为 
text/html
时，它确实会渲染，但会添加不需要的 
xmlns
属性。

有什么方法可以在渲染时仍然解析为 

image/svg+xml
（因为它就是这样）？我尝试了 document.adoptNode 但没有帮助。

这不会渲染： 

const svg = '<svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 1 1 0 1.5H8.5v4.25a.75.75 0 1 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2z"/></svg>';
const parser = new DOMParser();
const doc = parser.parseFromString(svg, 'image/svg+xml');
document.body.appendChild(doc.documentElement);

此渲染，但包含不需要的 

xmlns
属性： 

const svg = '<svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 1 1 0 1.5H8.5v4.25a.75.75 0 1 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2z"/></svg>';
const parser = new DOMParser();
const doc = parser.parseFromString(svg, 'text/html');
document.body.appendChild(doc.body.firstChild);

javascript svg dom namespaces xml-namespaces
2个回答
0
投票

DOMParser()
接口有一个方法
parseFromString(string, mimeType)
，它解析包含HTML或XML的字符串并返回HTMLDocument或XMLDocument。

mimeType
的第二个参数决定是使用
XML parser
还是
HTML parser
。只有 
text/html
会调用 HTML 解析器，任何其他有效的 MIME 类型都会调用 XML 解析器 refer

所以，它将工作如下： 

const svg = '<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg"><circle r="45" cx="50" cy="50" fill="grey" /></svg> ';
const parser = new DOMParser();
const doc = parser.parseFromString(svg, 'image/svg+xml');
const svgImg = doc.querySelector("svg")
document.body.appendChild(svgImg);
<html>
  <body>
    <h2>Parsing SVG using DOMParser()</h2>
  </body>
</html>

-1
投票

问题归结为 

xmlns
属性，该属性在解析 SVG mime 类型时是必需的，但在 HTML 中是可选的，如 https://stackoverflow.com/a/18468348/808699 中所述。

鉴于 SVG 在 HTML 中被视为外来元素，如果想省略 

text/html
属性，最好将其解析为 
xmlns
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.