Как создать <use> в <svg> через javascript?
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'. Это требуется для корректной работы ссылок в элементах внутри .
@francisco.friesen
Для создания <use> элемента внутри <svg> с использованием JavaScript вы можете использовать следующий код:
1 2 3 4 5 6 7 8 9 10 11 |
// Получаем ссылку на элемент <svg>
const svg = document.querySelector('svg');
// Создаем элемент <use>
const useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
// Устанавливаем атрибуты для элемента
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#id-of-target-element'); // Замените значение '#id-of-target-element' на ID элемента, на который вы хотите ссылаться
// Добавляем элемент <use> внутрь <svg>
svg.appendChild(useElement);
|
Обратите внимание, что в данном случае мы используем атрибут href, а не xlink:href, так как атрибут xlink:href устарел и рекомендуется использовать только href.
Таким образом, данный код создаст элемент <use> внутри <svg> и будет ссылаться на элемент с указанным ID, используя атрибут href. Помните, что href должен содержать значение, начинающееся с #, за которым следует ID целевого элемента в SVG.