如何解决通过 DOMParser SVG 命名空间将 SVG 字符串渲染到 DOM
我正在尝试从字符串中解析 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
属性,该属性在解析 SVG mime 类型时是必需的,但在 HTML 中是可选的,如 https://stackoverflow.com/a/18468348/808699 中所述。
鉴于 SVG 被认为是 HTML 中的外来元素,如果想省略 text/html
属性,最好将其解析为 xmlns
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。