Как изменить текст и аттрибут текста в svg с помощью javascript?

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

от richie_mayert , в категории: JavaScript , год назад

Как изменить текст и аттрибут текста в svg с помощью javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от clifford , год назад

@richie_mayert 

Вы можете изменить текст и атрибут текста в SVG с помощью JavaScript, используя следующий код:

  1. Изменение текста:
1
2
3
4
5
6
7
8
// Получение элемента svg
let svgElement = document.getElementById('svgElementId');

// Получение элемента текста внутри svg
let textElement = svgElement.getElementById('textElementId');

// Изменение текста
textElement.textContent = 'Новый текст';


  1. Изменение атрибута текста:
1
2
3
4
5
6
7
8
// Получение элемента svg
let svgElement = document.getElementById('svgElementId');

// Получение элемента текста внутри svg
let textElement = svgElement.getElementById('textElementId');

// Изменение атрибута текста
textElement.setAttribute('fill', 'red');


В приведенном выше коде 'svgElementId' должен быть идентификатором элемента <svg>, а 'textElementId' - идентификатором элемента <text>. Вы можете использовать другие методы для выбора нужного элемента, например, querySelector или querySelectorAll, в зависимости от вашей структуры SVG и требований.