<script>

Элемент <script> SVG позволяет добавлять скрипты в документ SVG.

Контекст использования

Атрибуты

crossorigin

Этот атрибут задаёт настройки CORS, определённые для элемента <script> в HTML. Тип значения: [ anonymous | use-credentials ]?; Значение по умолчанию: ?; Анимируемый: да

fetchpriority Экспериментальная возможность Нестандартная возможность

Задаёт подсказку об относительном приоритете загрузки внешнего скрипта. Допустимые значения:

high

Загружает внешний скрипт с высоким приоритетом относительно других внешних скриптов.

low

Загружает внешний скрипт с низким приоритетом относительно других внешних скриптов.

auto

Не задаёт предпочтений для приоритета загрузки. Используется, если значение не задано или оно недопустимо. Это значение по умолчанию.

href

URL скрипта для загрузки. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: нет

type

Этот атрибут задаёт тип используемого языка скриптов. Тип значения: <media-type>; Значение по умолчанию: application/ecmascript; Анимируемый: нет

xlink:href Устарело

URL скрипта для загрузки. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: нет

Интерфейс DOM

Этот элемент реализует интерфейс SVGScriptElement.

Пример

Click the circle to change colors.
<svg
  viewBox="0 0 10 10"
  height="120px"
  width="120px"
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4" />

  <script>
    // <![CDATA[
    function getColor() {
      const R = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      const G = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      const B = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      return `#${R}${G}${B}`;
    }

    document.querySelector("circle").addEventListener("click", (e) => {
      e.target.style.fill = getColor();
    });
    // ]]>
  </script>
</svg>

Спецификации

Совместимость с браузерами

См. также

• Атрибут fetchpriority
• Элемент script в HTML