0

所以,基本上我想用来创建一些包含 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 文档或模板中包含图标集。

4

1 回答 1

0

请尝试使用一个对象:

function openWindow(e) {
    let content = document.querySelector(e).content;
    document.body.appendChild(content.cloneNode(true));
}
<button onclick="openWindow('#my-template')">Open Template</button>
<template id="my-template">
    <div id="my-div">
        <div>My fancy stuff</div>
<object id="svgContent" type="image/svg+xml"
data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat">
</object>
    </div>
</template>

于 2018-10-07T20:59:48.220 回答