Как вставить svg код на сайт с помощью js
Я пытаюсь вставить svg на страницу как код. Структура примерно такая
<svg fill="..." xmlns="..." viewBox="..." width="..." height="...">
<path d="..."/>
</svg>
Я создаю тег svg и пытаюсь создать дочерний элемент path, и он создается, только парный а не одиночный как надо. Пытался делать двумя способами
Первый:
path_el = document.createElement('path');
Второй:
let path_s = '<path d="' + opts.svg.get('d') + '" />'
svg_el.insertAdjacentHTML('afterbegin', path_s);
Но в обоих случаях элемент автоматически становился парным.
Ответы (1 шт):
Автор решения: Михаил Камахин
→ Ссылка
Просто пример
const xmlns = "http://www.w3.org/2000/svg";
const boxWidth = 64;
const boxHeight = 64;
const svg = document.createElementNS(xmlns, "svg");
svg.setAttributeNS(null, "viewBox", "0 0 " + boxWidth / 2 + " " + boxHeight / 2);
svg.setAttributeNS(null, "width", boxWidth);
svg.setAttributeNS(null, "height", boxHeight);
const circle = document.createElementNS(xmlns, "circle");
circle.setAttributeNS(null, 'cx', '50%');
circle.setAttributeNS(null, 'cy', '50%');
circle.setAttributeNS(null, 'r', '15');
circle.setAttributeNS(null, 'stroke-width', '1px');
circle.setAttributeNS(null, 'stroke', 'red');
svg.append(circle)
document.body.append(svg);