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

【问题标题】：Render SVG string to DOM via DOMParser SVG namespace通过 DOMParser SVG 命名空间将 SVG 字符串渲染到 DOM
【发布时间】：2021-07-01 16:20:25
【问题描述】：

我正在尝试从字符串解析 SVG 元素并将其渲染到 DOM 中，但是当我解析为 image/svg+xml 时，<svg> 会以某种奇怪的方式附加到 DOM 中，但不会渲染它（在至少在 Firefox 中）。当我解析为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);

【问题讨论】：

为什么 xmlns 属性不受欢迎？请注意，如果您实际使用正确的 xmlns 属性，则应呈现第一种情况。
刚刚检查了您的代码：jsfiddle.net/mrovinsky/wj1rz2ub 我看到渲染的
我看到第一个示例在添加xmlns 时呈现。我只是认为这是不可取的，因为在 HTML（目标文档）中，该属性是可选的，我更喜欢保持最小化。所以我想这已经回答了这个问题。 xmlns 在解析 SVG 命名空间时不是可选的，而是用于 HTML 命名空间。

标签： javascript svg dom namespaces xml-namespaces

【解决方案1】：

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

鉴于 SVG 在 HTML 中被视为外来元素，如果想要省略 xmlns 属性，最好将其解析为 text/html。

【讨论】：