所以,基本上我想用来创建一些包含 svg 符号的组件。
<button onclick="openWindow('#my-template')">Open Template</button>
<template id="my-template">
<div id="my-div">
<div>My fancy stuff</div>
<svg>
<use href="/svg/icons.svg#my-icon"/>
</svg>
</div>
</template>
如您所见,我指的是<use href="/svg/icons.svg#my-icon"/>
在常规 html 中完美运行的外部 svg 图标文件。但后来我想做这个基本的 javascript 函数,图标本身在附加到 DOM 后不可见。
function openWindow(e) {
let content = document.querySelector(e).content;
document.body.appendChild(content.cloneNode(true));
}
所以基本上它所做的就是克隆模板内容并附加到文档正文。它工作得很好,只是图标本身没有被渲染。在 DOM 中创建了一个 svg 节点,但图标在屏幕上不可见。当我<svg>
在当前 HTML 文档中包含带有符号的内联文档并引用图标时,<use href="#i-my-icon"/>
它会按预期工作。图标可见。在这种情况下,我怎样才能仍然使用外部.svg
文件?我不想直接处理内联 svg 图标或在每个 html 文档或模板中包含图标集。