Как показать символ SVG из внешнего файла после appendChild - PullRequest
Новая
       61

Как показать символ SVG из внешнего файла после appendChild

0 голосов
/ 07 октября 2018

Итак, в основном я хочу использовать для создания некоторый компонент, который содержит символ 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, но значок не виден на экране.Когда я включаю встроенный <svg> документ с символами, перечисленными в моем текущем HTML-документе, и обращаюсь к значку с <use href="#i-my-icon"/>, он работает как ожидалось.Значок виден.Как я могу по-прежнему использовать внешний .svg файл в этом случае?Я не хочу иметь дело с встраиванием значков SVG напрямую или включением значков в каждый HTML-документ или шаблон.

1 Ответ

0 голосов
/ 07 октября 2018

Пожалуйста, попробуйте использовать объект: 

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>
...