Использование встроенных SVG с HTML5

Само собой разумеется, что SVG не так широко используется, как многие считают в сообществе веб-разработчиков. Оставляя в стороне дискуссию, в этом учебном пособии я покажу, как использовать встроенные SVG, охватывая ряд методов и исследуя взаимодействие между веб-страницей и графикой. При использовании в сочетании с другими появляющимися стандартами в HTML5, JavaScript и CSS3 встроенные SVG-файлы могут значительно улучшить взаимодействие с пользователем.

---

Шаг 1. Создайте страницу HTML5

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

В этом уроке мы рассмотрим практический пример встроенного SVG, создав простой компонент, представляющий колоду записей. Запись будет вращаться, и пользователь сможет взаимодействовать с ней — нажимая, чтобы замедлить его, и отпустив, чтобы ускорить его снова. SVG также будет содержать кнопку, которую пользователи могут нажимать, чтобы изменить запись, вызывая незначительное изменение ее внешнего вида. Видимые элементы SVG будут улучшены градиентами и фильтрами теней.

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

Как вы, вероятно, знаете, встроенные SVG-файлы соответствуют новым стандартам HTML5, поэтому код, который мы используем в этом руководстве, не будет полностью поддерживаться во всех браузерах. Хотя встроенные SVG теоретически поддерживаются во всех текущих версиях основных браузеров, внутренние анимации и интерактивные эффекты, которые мы будем использовать, пока не так хорошо поддерживаются. Окончательный результат должен работать правильно в текущих версиях Firefox, Chrome и Opera. Как всегда с техникой HTML5, убедитесь, что вы не полагаетесь на эти эффекты ни на каких живых сайтах, над которыми вы работаете, и по возможности включайте альтернативы.

Давайте начнем с создания схемы страницы HTML5, например, так:

Одним из основных преимуществ использования SVG является его масштабируемость. Чтобы использовать это, мы в первую очередь собираемся использовать относительные значения для определения содержимого SVG. Добавьте элемент контейнера для SVG в теле страницы:

Чтобы увидеть, как SVG находится внутри содержащего элемента, добавьте следующее в раздел стиля в заголовке страницы:

---

Шаг 2: Добавьте элемент SVG

В элемент контейнера в теле вашей страницы добавьте схему элемента SVG следующим образом:

Мы установили ширину и высоту на 100%, так как мы собираемся указать ширину содержащего элемента. Однако вместо того, чтобы явно указывать размеры, мы вместо этого будем использовать функцию JavaScript, чтобы показать, насколько легко вы можете масштабировать SVG вверх и вниз. Вы можете включить фиксированную ширину и высоту в открывающий тег SVG или раздел стиля.

---

Шаг 3. Создайте определения

Видимые фигуры на графике будут определены внутри элемента SVG. Перед этим мы будем работать над разделом defs . Раздел defs — это место, где вы размещаете определения, к которым вы можете позже обратиться при создании ваших фигур. В этом уроке раздел defs будет содержать определения для нескольких градиентных заливок и нескольких теней. Добавьте этот новый раздел внутри элемента SVG:

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

Градиенты

Сначала линейный градиент:

Этот градиент будет указан как заливка для фоновой прямоугольной области. Атрибуты x1 и y1 представляют начальные точки градиента внутри заполненной фигуры, при этом градиент разворачивается оттуда до точки, представленной x2 и y2 . В этом случае градиент будет проходить сверху вниз. Стоп-элементы представляют цветные точки в градиенте. Первый заявляет, что 10% от начала градиента будет сплошным темно-красным цветом, а второй останавливается, что 90% от конца градиента будет желтого цвета. Между этими двумя точками градиент будет смешивать цвета друг с другом. Оба цвета имеют полную непрозрачность.

Далее давайте добавим градиент для самой записи. Это немного сложнее — это радиальный градиент с несколькими цветовыми остановками:

Радиальный градиент начинается с внутренней части круга, при этом самые внутренние и внешние части круга, определенные как cx , cy , fx и fy , перечислены вдоль радиуса. В этом случае радиальный градиент будет занимать всю форму круговой записи. Основная часть записи будет черной, с двумя кольцами чуть более светлого цвета, представляющими более гладкие участки в центре записи и по ее краям. Мы также разместим лейбл на пластинке в ее центре, поэтому первый патч более светлого цвета на пластинке появится сразу за ее пределами. Добавьте градиентную заливку метки следующим образом:

Это простой линейный градиент, который будет использоваться в качестве заливки для круглой метки записи. Однако обратите внимание, что идентификатор градиента имеет ноль на конце. Это связано с тем, что мы собираемся добавить интерактивную функцию, позволяющую пользователю «изменить запись». Функция JavaScript будет переключаться между диапазоном градиентной заливки для элемента метки. Для этого добавьте еще пару градиентов:

Каждый из градиентов имеет идентификатор, заканчивающийся нарастающим целым числом, так что мы можем перебирать их в JavaScript. Теперь определите другой градиент, чтобы создать эффект блеска поверх записи:

На этот раз градиент использует непрозрачные и альфа-прозрачные цветовые остановки; эффект будет тонкий блеск через запись. Наконец, нам нужна металлическая заливка для кнопки и шпинделя:

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

фильтры

Прежде чем мы закончим с разделом defs , добавим пару теней, чтобы придать некоторым фигурам немного большую глубину:

Этот собирается появиться позади области записи. Свойства x , y , width и height относятся к положению и размерам в фигуре с использованием этого фильтра. Смещение определяет тень относительно исходной формы. Размытие препятствует тому, чтобы смещенная форма была сплошным цветом, поэтому она выглядит как тень. В этом случае будет отображаться только тень, а не сама форма — тень будет определяться выделенной формой, которая будет размещена за формой записи. Для пользовательских элементов управления, которые являются круглыми и металлическими, мы также хотим отбрасывать тень, но мы хотим, чтобы сама фигура также отображала:

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

---

Шаг 4: Создание фигур

Достаточно подготовки; давайте продолжим с графикой! Каждый элемент, который вы добавляете в тело SVG, будет отображаться поверх ранее перечисленных элементов, поэтому мы будем работать снизу вверх, начиная с фигур сзади и заканчивая фигурами спереди.

Фоновый прямоугольник

Сначала добавьте прямоугольник для фона:

Размеры и положение прямоугольного элемента указываются относительно содержащего SVG, который, если вы помните, относительно размера содержащего элемента. Мы установим это позже в JavaScript. Мы будем использовать относительный размер и значения положения, где это возможно, чтобы все изображение, анимация и взаимодействие могли увеличиваться или уменьшаться по требованию. Обратите внимание, что элемент fill указывает один из определенных нами градиентов, используя его атрибут ID.

Тень

Далее снизу идет тень на запись, используя один из созданных нами фильтров тени:

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

запись

Далее идет сама запись:

Как и в случае с тенью, атрибуты cx и cy представляют центр записи, который центрируется на изображении по горизонтали и вертикали с радиусом около трети. Опять же, мы используем один из определенных нами градиентов, который мы будем делать в каждой фигуре.

метка

На вершине записи находится ее лейбл, поэтому добавьте его следующим

Круг метки имеет ту же центральную точку, что и пластинка, через которую он простирается примерно на треть пути. Мы начнем с первой из опций градиента метки, которые мы определили, и позже мы реализуем переключение между ними пользователем — мы включаем здесь атрибут ID, чтобы ссылаться на этот элемент в JavaScript.

Сияние

Теперь давайте добавим блеска в начало записи:

Когда запись вращается, она будет немного сдвигаться вправо и вниз, поэтому мы сохраняем блеск немного меньше, чем запись, чтобы он не распространялся за пределы его при движении. Этот элемент также имеет атрибут ID для обнаружения взаимодействия с пользователем.

шпиндель

Для полноты давайте добавим маленький шпиндель в центр записи:

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

кнопка

И последнее, но не менее важное: пользователям нужна небольшая кнопка для управления изменением записи, используя ту же заливку и фильтр, что и для шпинделя:

На этот раз вместо самозакрывающегося элемента мы разделяем открывающую и закрывающую метки круга. Это связано с тем, что мы собираемся анимировать кнопку, когда пользователь нажимает на нее, и будут включать эффект анимации между этими тегами. Обратите внимание, что мы смогли повторно использовать элементы fill и filter из раздела defs . Вот начальный вид рисунка после того, как размеры страницы на месте:

---

Шаг 5: Добавить анимацию

Каждый элемент, который вы добавляете в тело SVG, будет отображаться поверх ранее перечисленных элементов.

Теперь у нас есть визуальные элементы, давайте добавим анимацию. Мы можем сделать вращение записи, используя преобразования анимации SVG, которые являются расширением анимации SMIL. Эти анимированные эффекты определены в разметке SVG. Эффект применяется к любому элементу SVG, внутри которого он появляется. Вы можете использовать CSS3-преобразования в SVG-элементах, но альтернативы на основе SMIL обеспечивают более высокий уровень контроля.

Мы собираемся включить две простые анимации: запись будет вращаться, а кнопка будет немного двигаться, когда пользователь нажимает на нее. Давайте начнем с немного более простой анимации для кнопки.

Внутри элемента формы кнопки, между открывающими и закрывающими тегами окружности, мы добавили анимационное преобразование следующим образом:

AnimateTransform применяется к атрибуту XML внутри элемента, в котором он появляется. В этом случае это преобразование с переводом. Атрибуты from и to представляют начальную и конечную позиции элемента — они относительно его начальной позиции, поэтому кнопка будет перемещаться вправо и вниз на один пиксель. Преобразование начнется, когда пользователь щелкнет, пройдет более одной десятой секунды и выполнится один раз. Кнопка вернется в исходное положение после завершения анимации. Совет: чтобы сохранить элемент в конечной позиции после анимации, укажите fill = «freeze» .

Теперь для вращения записи. AnimateTransform применяется к элементу SVG, но нам нужно, чтобы вращение применялось к более чем одному элементу — в частности, к записи и метке (не к блеску или тени). Вместо того, чтобы создавать отдельные анимации для каждого и выполнять их одновременно, мы можем использовать одно преобразование, группируя эти элементы вместе. Перед элементом круга, представляющим запись (с «recordGrad» в качестве ее заполнения), добавьте открывающий тег группы:

После круга, представляющего метку, закройте группу:

Теперь добавьте преобразование перед этим закрывающим тегом группы, чтобы оно применялось ко всей группе:

На этот раз анимированный эффект представляет собой поворотное преобразование. Элемент будет вращаться на 360 градусов, и, чтобы добавить к эффекту, он будет перемещаться вправо и вниз на один пиксель при каждом повороте в течение одной секунды, повторяясь бесконечно. Это преобразование также будет включать в себя атрибут from , поскольку необходимо указать начальную позицию вращающихся элементов. Если вы не укажете эту позицию, элементы будут вращаться вокруг точки 0, 0 по умолчанию. Однако в настоящее время вы не можете предоставить относительные (то есть процентные) значения для этих атрибутов, только фиксированные значения. По этой причине мы собираемся установить атрибут from, когда мы указываем размеры SVG в JavaScript.

---

Шаг 6: Добавить взаимодействие

Теперь давайте реализуем наши интерактивные функции: нажмите кнопку, чтобы изменить запись, и нажмите запись, чтобы замедлить ее.

Изменить запись

Сначала в разделе сценария заголовка вашей страницы добавьте эти переменные для подсчета и отслеживания дизайна меток:

Теперь внутри открывающего тега для элемента круга, представляющего кнопку (которая теперь имеет анимацию между своими тегами), добавьте следующий прослушиватель события click:

Вернувшись в раздел сценария head, добавьте схему функции:

Каждый раз, когда пользователь нажимает кнопку, мы будем переходить к следующей метке, возвращаясь к первой, когда достигнем последней:

Последняя строка демонстрирует, как вы можете взаимодействовать с элементами SVG, используя методы DOM, как вы это делаете с другими элементами веб-страницы. Здесь мы устанавливаем атрибут fill элемента круга label для использования следующей градиентной заливки, указывая идентификатор заполнения.

Замедли это

Теперь добавьте следующие атрибуты события в элемент shine записи (с «shineGrad» в качестве его заполнения), так как мы собираемся использовать события мыши вверх и вниз для запуска замедления записи и ее повторного ускорения:

Вернувшись в раздел сценариев, добавьте функцию, когда пользователь нажимает на запись:

Внутри этой функции мы можем замедлить анимацию вращения записи, изменив атрибут продолжительности animateTransform . Мы также изменяем непрозрачность блеска, чтобы создать впечатление нажатия:

Когда пользователь выпускает запись, мы хотим, чтобы она вернулась к нормальной скорости и внешнему виду, поэтому добавьте функцию «мыши вверх»:

---

Шаг 7: Укажите размер

Теперь мы наконец можем установить общий размер SVG. В верхней части раздела скрипта добавьте новую переменную:

Первоначально мы будем использовать 300 пикселей как для ширины, так и для высоты изображения, но вы можете изменить это в любой момент. Определите функцию в разделе скрипта, чтобы установить эти размеры:

Мы устанавливаем размер на элемент div . Найдите минутку, чтобы взглянуть на последнюю строку в этой функции. Поскольку анимация с поворотным преобразованием не может использовать относительные процентные значения, мы должны установить элемент from с помощью переменной размера (деленной на два для центральной точки записи). С 300 в качестве размера SVG, вот как будет выглядеть преобразование с фиксированными значениями:

Если вы хотите использовать фиксированные значения в SVG, вы можете это сделать. Мы используем эту технику только для демонстрации использования относительных измерений. Наконец, вызовите эту функцию в конце раздела скрипта:

---

Вывод

Наша интерактивная SVG анимация завершена! Откройте страницу в браузере поддержки, чтобы просмотреть эффект ; не забудьте попробовать поработать с записью и кнопкой. Попробуйте изменить переменную размера, чтобы увидеть, как все элементы SVG адаптируются к нужным параметрам, включая анимацию и взаимодействия.

Если вы хотите изучить SVG более подробно, некоторые темы, которые следует рассмотреть, включают в себя пути, текст, маскирование и отсечение. Есть также ряд дополнительных параметров анимации для рассмотрения. Конечно, эти эффекты не будут работать для всех пользователей сейчас, но, надеюсь, однажды скоро …