добавить SVG и использовать элементы с JavaScript - PullRequest
0 голосов
/ 28 января 2019

Я хочу добавить иконку, используя только чистый JavaScript.Значок является локальным в моей сети, и в HTML он выглядит следующим образом:

 <svg class="pictogram pictogram-checkmark">

          <use xlink:href="/cdn/svg/v18/svg-icons.svg#checkmark" href="/cdn/svg/v18/svg-icons.svg#checkmark"></use>
      </svg>

Как мне преобразовать это?

1 Ответ

0 голосов
/ 28 января 2019

Предположим, что у вас где-то есть корневой элемент svg, где вы храните свои определения (в данном случае первый элемент svg), вот как создать новый элемент svg и элемент использования для повторного использования пути:

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";
// create a new svg element
let svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttributeNS(null, "viewBox", "0 0 24 24");
// append the new svg element
where.appendChild(svg);
// create a new use element
let use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(SVG_XLINK, 'xlink:href', '#checkmark');
// append the new svg element to the svg element
svg.appendChild(use);
svg{border:1px solid}
#root{position:absolute;left:-10em;}
#where svg{width:24px; height:24px;}
#where svg use{fill:green;}
<svg id="root" width='0' height='0' viewBox='0 0 24 24'><title>check</title>
    <path id="checkmark" d='M9 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z'></path>
</svg>

<p id="where"></p>

В качестве альтернативы для галочки вы можете использовать глифы: &#x2713;: ✓ или &#x2714;: ✔

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...