Сценарий JavaScript SVG

С помощью JavaScript можно написать скрипт SVG. Написав скрипт, вы можете изменить элементы SVG, установить им анимацию или слушать события мыши на формах. Когда SVG встраивается в HTML-страницу, элементы SVG можно использовать в JavaScript.

Вы можете написать скрипт SVG с помощью JavaScript. Написав скрипт, вы можете изменить элементы SVG, установить им анимацию или слушать события мыши на формах.

Когда SVG встраивается в HTML-страницу, элементы SVG можно использовать в JavaScript, как если бы они были элементами HTML. JavaScript выглядит так же.

Этот материал показывает вам пример обработки элементов SVG с помощью JavaScript, но не объясняет сам JavaScript. Чтобы понять примеры в этом материале, вам нужно уже иметь некоторые знания о JavaScript.

Пример SVG-скрипта

Это пример простого SVG-скрипта, который изменяет размер SVG-ректанга при нажатии на кнопку.

<svg width="500" height="100">
　　　　<rect id="rect1" x="10" y="10" width="50" height="80"
　　　　　　　　　　style="stroke:#000000; fill:none;"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
　　　　　　　　　　　　onclick="changeDimensions()"/>
<script>
　　　　function changeDimensions() {
　　　　　　　　document.getElementById("rect1").setAttribute("width", "100");
　　　　}
</script>

Попробуйте щелкнуть кнопку, чтобы увидеть, что会发生.

Получение ссылки на SVG-элемент через ID

Вы можете использовать функцию document.getElementById() для получения ссылки на SVG-форму. Вот пример:

var svgElement = document.getElementById("rect1");

Этот пример��取 ссылку на SVG-элемент с ID rect1 (ID указан в свойстве id SVG-элемента).

Изменение значения свойства

Как только вы получите ссылку на SVG-элемент, вы можете использовать функцию setAttribute() для изменения его свойств. Вот пример:

var svgElement = document.getElementById("rect1");svgElement.setAttribute("width", "100");

В этом примере устанавливается свойство width выбранного SVG-элемента. Вы можете использовать функцию setAttribute() для установки любого другого свойства, включая свойство style.

Вы также можете использовать функцию getAttribute() для получения значения свойства. Вот пример:

var svgElement = document.getElementById("rect1");var width = svgElement.getAttribute("width");

Изменение CSS-свойства

Через свойство style SVG-элемента можно ссылаться на заданные CSS-свойства и изменять CSS-свойства SVG-элемента. Вот пример установки CSS-свойства stroke:

var svgElement = document.getElementById("rect1");
svgElement.style.stroke = "#ff0000";

Вы также можете таким образом установить любое другое свойство CSS. Достаточно просто указать его имя после svgElement.style. и установить значение.

Вы также можете читать значения свойств CSS через атрибут style. Вот пример:

var svgElement = document.getElementById("rect1");
var stroke = svgElement.style.stroke;

Этот пример читает значение свойства CSS stroke.

Свойства CSS с дефисами в названии (например, stroke-width) необходимо указывать через конструкцию ['']. Это делается потому, что имена свойств с дефисами в JavaScript недопустимы. Поэтому вы не можете написать

element.style.stroke-width

Напротив, вам нужно написать

element.style['stroke-width']

Таким образом, вы также можете использовать дефисы в названиях для обращения к свойствам CSS.

Слушатель событий

Вы можете напрямую добавлять слушатели событий к формам SVG. Как и с HTML-элементами. Вот пример добавления событий onmouseover и onmouseout:

<svg width="500" height="100">　　　　
<rect x="10" y="10" width="100" height="75"　　　　
style="stroke: #000000; fill: #eeeeee;"　　　　
onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] = 5;"　　　　
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"　　　　
/>　　　　
</svg>

Этот пример изменяет цвет и ширину контура при наведении мыши на прямоугольник и возвращает их в исходное состояние при отведении мыши. Попробуйте следующий пример. Переместите мышь на форму, затем снова переместите её вне формы, чтобы увидеть эффект слушателя событий.

Вы также можете использовать функцию addEventListener() для добавления слушателя событий к элементу SVG. Вот пример:

var svgElement = document.getElementById("rect1");
svgElement.addEventListener("mouseover", mouseOver);
function mouseOver() {
　　　　alert("событие произошло!");
}

Этот пример добавляет функцию слушателя событий MouseOver к событию MouseOver. Это означает, что при наведении мыши на элемент SVG будет вызываться функция слушателя событий.

Анимированные SVG-формы

Чтобы сделать SVG-форму анимированной, вам нужно повторно вызывать JavaScript-функцию. Функция используется для изменения позиции или размера формы. При повторном вызове функции с очень коротким интервалом, позиция или размер формы также будут обновляться с очень коротким интервалом, что создаст впечатление анимации.

Это пример анимации SVG с использованием скрипта. Ниже показан код, создающий анимацию. Нажмите на две кнопки под SVG-изображением, чтобы начать и остановить анимацию.

Это код, необходимый для создания вышеуказанной анимации:

<svg width="500" height="100">
　　　　<circle id="circle1" cx="20" cy="20" r="10">
　　　　　　　　　　　　style="stroke: none; fill: #ff0000;"/>
</svg>
<script>
　　　　var timerFunction = null;
　　　　function startAnimation() {
　　　　　　　　if(timerFunction == null) {
　　　　　　　　　　　　timerFunction = setInterval(animate, 20);
　　　　　　　　}
　　　　}
　　　　function stopAnimation() {
　　　　　　　　if(timerFunction != null){
　　　　　　　　　　　　clearInterval(timerFunction);
　　　　　　　　　　　　timerFunction = null;
　　　　　　　　}
　　　　}
　　　　function animate() {
　　　　　　　　var circle = document.getElementById("circle1");
　　　　　　　　var x = circle.getAttribute("cx");
　　　　　　　　var newX = 2 + parseInt(x);
　　　　　　　　if(newX > 500) {
　　　　　　　　　　　　newX = 20;
　　　　　　　　}
　　　　　　　　circle.setAttribute("cx", newX);
　　　　}
</script>
<br/>
<input type="button" value="Начать анимацию" onclick="startAnimation();">
<input type="button" value="Стоп анимации" onclick="stopAnimation();">

Оба HTML-кнопки добавили слушатель onclick. Эти слушатели вызывают функции startAnimation() и stopAnimation(), которые используются для запуска и остановки анимации. Анимация начинается, устанавливая таймер, который каждые 20 миллисекунд вызывает функцию Animate(). Удаление этой функции таймера останавливает анимацию.

Анимация выполняется внутри функции animate(). Сначала функция document.getElementById() получает ссылку на элемент <circle> в SVG-изображении. Затем читается атрибут cx круга и преобразуется в число. Затем 2 добавляется к значению cx. Если новое значение x больше 500, то его сбрасывают до 20. В конце новый значение x ставится обратно в атрибут cx элемента <circle>. Таким образом, круг перемещается на новое положение x.