С помощью HTML5 вы можете встраивать разметку SVG (Scalable Vector Graphics) в ваши страницы. В нашем сегодняшнем руководстве мы хотим рассказать вам о том, как внедрить простенький SVG-элемент в HTML-страницу. А также расскажем вам о технике изменения SVG в javascript в тех случаях, когда лучше будет использовать HTML5 canvas.
За счёт HTML5 у разработчиков появляется выбор между элементами canvas и строчными SVG. Какой метод лучше выбрать зависит от конкретного проекта. В целом, SVG даёт нам преимущество, так как получаемые изображения максимально масштабируемы практически без потери качества. SVG также могут быть частью интерактивных и анимированных компонентов, так как SVG-элементы являются частью разметки HTML-страницы, каждая часть из которой может быть управляемой посредством DOM.
Создание HTML5-страницы
Начните создание своей HTML5-страницы, используя следующую структуру:
<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>На странице есть отдел для функций javascript, и поэтому мы можем продемонстрировать изменение SVG за счет управления DOM.
Добавляем SVG-элемент
Вы можете добавить SVG прямо в отдел страницы body, используя ту же разметку, которую вы используете для отдельного SVG-файла. Добавьте следующий код между открывающим и закрывающим тэгами body:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400"> <ellipse cx="200" cy="200" rx="80" ry="60" style="fill:#330000;"/> </svg>Данный SVG создает простой элемент эллипса. Атрибуты данного эллипса определяют «cx» и «cy» в качестве центральных точек на осях X и Y. Элемент также определяют атрибуты «rx» и «ry» для указания радиуса на каждой оси. Наконец, элемент оформлен посредством цвета заливки.
Вы можете использовать элемент таким, какой он есть, на протяжении всего руководства, тем не менее, если вы хотите сделать SVG-элемент более сложным (и при этом вы новичок в SVG-разметке), то можете добавить градацию путем изменения вашего кода следующим образом:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400"> <defs> <radialGradient id="myGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#ffff33;" /> <stop offset="100%" style="stop-color:#330000;" /> </radialGradient> </defs> <ellipse cx="200" cy="200" rx="80" ry="60" style="fill:url(#myGradient);"/> </svg>Раздел «defs» в самом верху определяет радиальную градацию, с ID, который указан в атрибуте стиля эллипса для заливки формы. Секция gradient определяет каждый цвет, а также части эллипса, которые должны быть закрашены.
Взгляните не свою страницу через браузер, чтобы увидеть, как выглядит SVG-изображение.
Захват пользовательского ввода
Давайте сделаем нашу страницу интерактивной с помощью учета данных, вводимых пользователем. Добавьте следующий код в тело вашей страницы, под элементом SVG:
<br/> Enter the radius for the X axis:<br/> <input type="text" id="radiusX"/><br/> Enter the radius for the Y axis:<br/> <input type="text" id="radiusY"/><br/> <input type="button" value="redraw" onclick="redrawEllipse()"/>Мы дадим пользователю возможность выбирать значения радиуса по осям x и y внутри эллипса. Когда кнопка будет нажата, она запустит функцию для изменения разметки SVG.
Изменение SVG
Добавьте следующую javascript-функцию для выбора скрипта в головной отдел вашей страницы:
//function to redraw the svg function redrawEllipse() { //get the input x radius var xRadius = document.getElementById("radiusX").value; //get the input y radius var yRadius = document.getElementById("radiusY").value; //get the ellipse element var ellipse = document.getElementsByTagName("ellipse")[0]; //set the new x radius ellipse.setAttribute("rx", xRadius); //set the new y radius ellipse.setAttribute("ry", yRadius); }Функция сначала возвращает данные пользователя, затем ссылается на элемент эллипса внутри SVG-элемента. Затем скрипт выставляет атрибуты для радиуса по осям X и Y, используя значение, которые ввел пользователь. Откройте страницу в браузере и введите новые значения для того, чтобы увидеть, как динамично изменяется SVG. Учитывая вышеприведенную разметку, графика должна нормально умещаться при введенных значениях не выше 200 по каждой оси.
Завершение
HTML5 предоставляет разработчикам выбор среди изображений в виде строчных SVG или графики, реализованной при помощи элемента canvas. Если вам понадобится векторное изображение, которое будет масштабироваться и адаптироваться под экраны пользователей, то лучше воспользоваться SVG. SVG также разработаны для поддержки анимаций, и посредством DOM-скриптинга вы можете управлять ими в рамках одного и того же скрипта, как и с другими функциями сайта. Тот факт, что SVG написан в XML-коде, также делает их более доступными. Какую бы опцию вы ни захотели, давно прошли те дни, когда нужно было полагаться на сторонние программы для генерации графики и анимации для веб-страницы.
