Скрипты

Предотвращение поведения по умолчанию в коде обработчика событий

При написании кода для перетаскивания иногда можно заметить, что во время перетаскивания случайно выделяется текст на странице. Или, если вы хотите использовать в коде клавишу Backspace, может потребоваться переопределить поведение браузера по умолчанию при её нажатии — переход на предыдущую страницу. Это позволяет сделать метод evt.preventDefault().

Использование eventListeners с объектами

Методы addEventListener() и removeEventListener() очень полезны при создании интерактивного SVG. В качестве второго параметра этих методов можно передать объект, реализующий интерфейс handleEvent.

function myRect(x, y, w, h, message) {
  this.message = message;

  this.rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  this.rect.setAttributeNS(null, "x", x);
  this.rect.setAttributeNS(null, "y", y);
  this.rect.setAttributeNS(null, "width", w);
  this.rect.setAttributeNS(null, "height", h);
  document.documentElement.appendChild(this.rect);

  this.rect.addEventListener("click", this, false);

  this.handleEvent = (evt) => {
    switch (evt.type) {
      case "click":
        alert(this.message);
        break;
    }
  };
}

Междокументное взаимодействие: ссылка на встроенный SVG

При использовании SVG в HTML Adobe SVG Viewer 3.0 автоматически добавляет свойство окна с именем svgDocument, которое указывает на документ SVG. В нативной реализации SVG в Mozilla это свойство отсутствует, поэтому window.svgDocument в Mozilla не работает. Вместо этого можно использовать

const svgDoc = document.embeds["name_of_svg"].getSVGDocument();

чтобы получить ссылку на встроенный документ SVG.

Лучший способ получить доступ к Document, представляющему документ SVG, — обратиться к HTMLIFrameElement.contentDocument (если документ отображается в элементе <iframe>) или к HTMLObjectElement.contentDocument (если документ отображается в элементе <object>), например:

const svgDoc = document.getElementById("iframe_element").contentDocument;

Кроме того, элементы <iframe>, <embed> и <object> предоставляют метод getSVGDocument(), который возвращает XMLDocument, представляющий встроенный в элемент документ SVG, или null, если элемент не представляет документ SVG.

Также можно использовать document.getElementById("svg_elem_name").getSVGDocument(), который возвращает тот же результат.

Междокументное взаимодействие: вызов функций JavaScript

При вызове из встроенного в HTML-документ файла SVG функции JavaScript, находящейся в HTML-файле, следует использовать parent.functionName() для обращения к этой функции. Хотя плагин Adobe SVG Viewer позволяет использовать functionName(), это не рекомендуемый способ.

Дополнительную информацию и примеры можно найти на странице вики SVG о междокументном взаимодействии.

У метода setProperty три параметра

Функция svgElement.style.setProperty("fill-opacity", "0.0") вызывает исключение DOMException — SYNTAX ERR в Mozilla. Это поведение определено W3C в спецификации DOM Level 2 Style. Функция setProperty определена как функция с тремя параметрами. Приведённый выше код можно заменить на 'svgElement.style.setProperty("fill-opacity", "0.0", "")', что соответствует стандартам.

Ссылки

Вики SVG о скриптах и программировании