Как создать <use> в <svg> через javascript?

Пользователь

от francisco.friesen , в категории: JavaScript , 2 месяца назад

Как создать <use> в <svg> через javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от kenya , 2 месяца назад

@francisco.friesen 

Вы можете создать элемент внутри элемента с помощью JavaScript, используя методы createElementNS и setAttributeNS.


Вот пример кода, который показывает, как создать элемент с использованием JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Получаем ссылку на элемент 
const svg = document.querySelector('svg');

// Создаем элемент 
const useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');

// Устанавливаем атрибуты для элемента 
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#id-of-target-element'); // Замените значение '#id-of-target-element' на ID элемента, на который вы хотите ссылаться

// Добавляем элемент  внутрь 
svg.appendChild(useElement);


Обратите внимание, что для установки атрибута 'xlink:href' мы используем метод setAttributeNS с пространством имен 'http://www.w3.org/1999/xlink'. Это требуется для корректной работы ссылок в элементах внутри .