Question

因此，基本上我想用来创建一些包含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>

如您所见，我指的是外部svg图标文件<use href="/svg/icons.svg#my-icon"/>，该文件可以在常规html中完美运行。但是然后我想做这个基本的javascript函数，图标本身在追加到DOM后不可见。

function openWindow(e) {
    let content = document.querySelector(e).content;
    document.body.appendChild(content.cloneNode(true));
}

因此，基本上，它所做的全部就是克隆模板内容并将其附加到文档正文中。除了不显示图标本身之外，它可以完美地工作。在DOM中创建了一个svg节点，但是图标在屏幕上不可见。当我在当前HTML文档中包括带有符号的内嵌<svg>文档并用<use href="#i-my-icon"/>引用图标时，它可以正常工作。图标可见。在这种情况下，如何仍可以使用外部.svg文件？我不想直接处理内联的svg图标，也不想在每个html文档或模板中都包含图标集。

Answer 1

请尝试使用一个对象：

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>

如何在appendChild之后从外部文件显示svg符号

1 个答案: