Динамическое создание пути SVG в JS

Я не могу заставить работать следующий код. Я пытаюсь динамически генерировать следующий SVG в JS:

<svg xmlns = "http://www.w3.org/2000/svg" height = "48" width = "48"><path d = "m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z"/></svg>

Я пытался:

let closeButton = document.createElement("svg");
closeButton.setAttribute("height", "48");
closeButton.setAttribute("width", "48");
let closeButtonPath = document.createElementNS('http://www.w3.org/2000/svg',"path"); 
closeButtonPath.setAttributeNS(null, "d", "m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z");
closeButton.appendChild(closeButtonPath);
this.#form.appendChild(closeButton);

Попробуйте document.createElementNS('http://www.w3.org/2000/svg', 'svg'); вместо этого

— 20.11.2022 13:22

javascript html svg

20.11.2022 12:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Почему бы не сделать это «ленивым способом» в 1 строку (кроме случаев, когда у вас есть переменные для ширины, высоты и пути)? :)

let svg_str = '<svg xmlns = "http://www.w3.org/2000/svg" width = "48px" height = "48px"><path d = "m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z"/></svg>';
document.querySelector('#button1').innerHTML = svg_str;


// if height and widht has to be changed otherwise you put them directly in svg_str
const h = 48 + 'px';
const w = 48 + 'px';
// if path is a variable otherwise you put directly in svg_str
const path_d = "m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z";

svg_str = '<svg xmlns = "http://www.w3.org/2000/svg" width = "' + w + '" height = "' + h + '"><path d = "' + path_d + '"/></svg>';
document.querySelector('#button2').innerHTML = svg_str;

<div id = "button1">

</div>
<div id = "button2">

</div>

1/10, не попал бы в художественную галерею

— 20.11.2022 14:57

«Искусство в глазах смотрящего, и у каждого будет своя интерпретация».

— 20.11.2022 17:16

20.11.2022 14:55

«Искусство в глазах смотрящего, и у каждого будет своя интерпретация». ― Э.А. Буккьянери

<style>
  svg-icon { background:pink }
</style>

<svg-icon></svg-icon>
<svg-icon width = "80"></svg-icon>
<svg-icon width = "180"></svg-icon>

<script>
customElements.define("svg-icon", class extends HTMLElement{
  connectedCallback(){
    this.style.display = "inline-block";
    let width = (this.getAttribute("width") || 48) + "px";
    this.innerHTML =`<svg width = "${width}" height = "${width}" viewBox = "0 0 48 44">`
                    + `<path d = "m12.4 37.6-2.1-2.1 11.6-11.5-11.6-11.6 2.1-2.1 11.6 11.6 11.6-11.6 2.1 2.1-11.6 11.6 11.6 11.6-2.1 2.1-11.6-11.6z"/>`
                    + `</svg>`;
  }
});
</script>

20.11.2022 17:15

Ответ принят как подходящий

Как прокомментировал @enxaneta: в вашем коде есть ошибки:

Для создания svg элементов вам понадобится

createElementNS() вместо createElement()

Кроме того, this.#form недопустимый селектор
Скорее используйте что-то вроде этого:

let form = document.getElementById('form');
form.appendChild(closeButton);

const ns  = "http://www.w3.org/2000/svg";

let closeIconSvg = document.createElementNS(ns, "svg");
closeIconSvg.setAttribute("viewBox", "0 0 48 48");
closeIconSvg.classList.add('closeIconSvg');

let closeIconPath = document.createElementNS(ns,"path"); 
closeIconPath.setAttribute("d", "m12.45 37.65 -2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z");
closeIconSvg.appendChild(closeIconPath);

//let form = document.getElementById('form');
let closeButton = document.getElementById('btnClose');
closeButton.appendChild(closeIconSvg);

*{
  box-sizing:border-box
}

.form{
  font-size:48px;
  display:flex;
  align-items:center;
}

input, 
.btnClose{
  margin:0;
  padding:0.15em 0.3em 0.3em 0.3em;
  font-size:1em;
  border:1px solid #ccc;
  background:#fff;
}

.closeIconSvg{
  width:auto;
  height:1em;
  vertical-align: -0.25em;
}

<form id = "form" class = "form" action = "">
  <input type = "text" placeholder = "name">
  <button  id = "btnClose" class = "btnClose" type = "button"></button>
</form>

Я настоятельно рекомендую использовать более семантические имена переменных:

Поскольку родительский svg вашего значка не является настоящей кнопкой, вам лучше использовать понятное имя, например «closeIconSvg».

20.11.2022 18:30