—»     —»   Создание строчных SVG-файлов при помощи HTML5
  Раздел: Руководства   Нет комментариев  

Создание строчных SVG-файлов при помощи HTML5



С помощью HTML5 вы можете встраивать разметку SVG (Scalable Vector Graphics) в ваши страницы. В нашем сегодняшнем руководстве мы хотим рассказать вам о том, как внедрить простенький SVG-элемент в HTML-страницу. А также расскажем вам о технике изменения SVG в javascript в тех случаях, когда лучше будет использовать HTML5 canvas.

За счёт HTML5 у разработчиков появляется выбор между элементами canvas и строчными SVG. Какой метод лучше выбрать зависит от конкретного проекта. В целом, SVG даёт нам преимущество, так как получаемые изображения максимально масштабируемы практически без потери качества. SVG также могут быть частью интерактивных и анимированных компонентов, так как SVG-элементы являются частью разметки HTML-страницы, каждая часть из которой может быть управляемой посредством DOM.

Создание строчных SVG-файлов при помощи HTML5

Создание 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-коде, также делает их более доступными. Какую бы опцию вы ни захотели, давно прошли те дни, когда нужно было полагаться на сторонние программы для генерации графики и анимации для веб-страницы.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 5093   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31