SVGStyleElement: свойство title

Свойство SVGStyleElement.title — это строка, соответствующая атрибуту title данного элемента SVG style. Его можно использовать для выбора между альтернативными стилями.

Строка с любым значением.

Значение инициализируется строкой, указанной в соответствующем атрибуте title стиля.

В этом примере показано, как программно получить и установить свойство title для стиля, определённого в определении SVG.

HTML содержит определение SVG для <circle> с элементом <style>, у которого есть title. Мы также определяем текстовое поле для отображения текущего заголовка.

<textarea id="log" rows="3" cols="50"></textarea>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <style title="gold fill style">
    circle {
      fill: gold;
    }
  </style>
  <circle cx="50" cy="40" r="25" />
</svg>

Код ниже получает элемент style (SVGStyleElement) по имени тега, выводит заголовок, затем меняет и снова выводит заголовок.

const log = document.getElementById("log");

const svg = document.querySelector("svg");
const style = svg.querySelector("style");
log.value = `Initial title: ${style.title}\n`;
style.title = "Altered Title";
log.value += `New title: ${style.title}`;

Текст в журнале ниже показывает, что заголовок изначально отражает соответствующий атрибут в элементе <style>, но затем может быть изменён на другое значение.

Обратите внимание, что альтернативные стили не применяются по умолчанию; их необходимо выбрать в качестве предпочтительного стилевого листа пользователем. Чтобы применить альтернативные стилевые листы в Firefox:

1. Откройте строку меню (нажмите F10 или нажмите клавишу Alt)
2. Откройте подменю Вид > Стиль страницы
3. Выберите стилевые листы по их именам.