Advertisement
  1. Code
  2. HTML & CSS

Використання вбудованих елементів SVG з HTML5

by
Read Time:16 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Безперечно, використання SVG не так поширено, як багато членів суспільства веб-розробників, ймовірно, вважають, повинно було би бути. Не торкаючись суперечок з цього приводу, у цьому посібнику я продемонструю вам, як використовувати вбудовані елементи SVG, обговорюючи між тим ряд технік та розглядаючи взаємодію між веб-сторінкою та графікою. При сумісному використанні з іншими стандартами, що розвиваються в HTML5, JavaScript або CSS, вбудована SVG може значно покращити досвід користування користувача.


Крок 1: Створюємо HTML-сторінку

Ви можете взаємодіяти з елементами 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.  У цьому випадку градієнт буде поширюватися зверху донизу. Елементи stop являють собою точки зупинки градієнта. За допомогою першого вказується, що на відстані 10% від початкової точки градієнта буде безперервний темно-червоний колір, а за допомогою другого – що на відстані 90% від початкової точки градієнта буде жовтий колір. Між цими двома точками градієнт буде непомітно переходити від відтінку до відтінку. Обидва кольори повністю непрозорі.

Далі давайте додамо градієнт для самої пластинки. З цим трохи важче – це радіальний градієнт з декількома точками зупинки:

Радіальний градієнт починається з центру кола, причому  самі внутрішні та найбільш віддалені частини кола визначаються за допомогою cx, cy, fx та fy, перерахованих рядом з радіусом. У нашому випадку радіальний градієнт повністю займе округлу фігуру пластинки. Більша частина пластинки буде чорною з двома обідками трохи світлішого кольору, що представляють більш гладкі ділянки біля центру пластинки та її країв. Також ми будемо розміщувати наклейку на пластинці біля її центру, так що перший фрагмент обідка світлішого кольору на пластинці буде розташовуватися одразу за нею. Далі додаємо градієнтну заливку для наклейки:

Це простий лінійний градієнт, що буде використовуватися в якості заливки для круглої наклейки пластинки. Проте зверніть увагу на те, що ID градієнта містить 0 на кінці. Це так, оскільки ми збираємося додати функцію для додання можливості взаємодії, за допомогою якої користувач зможе «змінювати пластинку». За допомогою функції JavaScript будуть переключатися елементи набору градієнтних заливок для елемента наклейки. Для цього додайте декілька інших градієнтів:

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

У цей раз у градієнті використовуються точки зупинки, компонент кольору альфа (* у комп'ютерній графіці - четвертий компонент кольору, використовуваний для контролю змішування кольорів з фоном або підлеглим об'єктом. У цьому разі його значення, що дорівнює 1,0, означає цілковиту непрозорість, а 0,0 - цілковиту прозорість) яких має значення 0; у результаті вийде ледь помітний блиск уздовж пластинки. Нарешті, нам потрібен металевий градієнт для кнопки та шпинделя:

У цей раз радіальний градієнт трохи зміщено від центру для створення почуття глибини та освітлення, яке буде доповнено фільтром для додання падаючої тіні.

Фільтри

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

Ця тінь з'явиться за областю з пластинкою. За допомогою властивостей x, y, width та height вказується позиція та розміри області фігури, до якої застосовується фільтр. За допомогою відступу (* feOffset) вказується тінь відносно початкової фігури. За допомогою ефекту розмивання (* feGaussianBlur) зміщена фігура не буде чистого кольору (* колір, утворюваний однаково забарвленими пікселами), завдяки чому вона буде виглядати як тінь. У цьому випадку з'явиться тільки тінь, але не сама фігура – тінь буде створюватися за допомогою спеціальної фігури, яка буде розташована за фігурою пластинки. Щодо елементів керування користувача, які є округлими та металевими, то нам також потрібна падаюча тінь, але ми хочемо, щоб сама фігура також відображалася:

Головною відмінністю тут, окрім масштабу тіні, є елемент для додання бленд-ефекту (* плавний перехід одного об'єкта в інший із настроюванням відповідним чином форми, розміщення, кольору і тону (бленд-ефект); feBlend), за допомогою якого буде збережено початкову фігуру, а також буде показуватися тінь навколо неї.


Крок 4: Створюємо фігури

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

Фоновий прямокутник

Для початку додайте прямокутник для фону:

Розмір та розташування елемента rect вказано відносно вміщуючого його SVG, розміри якого, якщо ви пам'ятаєте, задані відносно розміру елемента-контейнера. Ми встановимо їх пізніше у коді JavaScript. Ми будемо використовувати відносні значення розміру та позиції всюди, де це можливо, так щоб все зображення разом з анімацією та взаємодією могли масштабуватися згідно з нашими вимогами. Зверніть увагу на те, що в атрибуті елемента fill вказується один з визначених нами градієнтів за допомогою його ID.

Тінь

Далі знизу йде тінь пластинки, що реалізується за допомогою одного зі створений нами фільтрів для додання падаючої тіні:

Тінь буде розташовуватися позаду пластинки у вигляді кола з радіусом, розмір якого складає приблизно третю частину простору, відведеного під зображення, розташоване у центрі. Оскільки у фільтрі у цьому випадку не використовується бленд-ефект до зображення, саме коло не буде відображуватися, тільки його тінь.

Пластинка

Далі йде сама пластинка:

Як і у випадку з тінню, атрибути cx та cy є центром пластинки, яку відцентровано на зображенні горизонтально та вертикально, з радіусом, значення якого складає приблизно третю частину простору, відведеного під зображення. Знов-таки, ми використовуємо один із раніше визначених нами градієнтів, які будемо застосовувати до кожної фігури.

Наклейка

Поверх пластинки розташовується її наклейка, так що додайте її далі:

Центральна точка наклейки співпадає з такою пластинки, уздовж якої вона простягається приблизно на третину простору останньої. Ми починаємо з першого варіанту визначених нами градієнтів для наклейки і пізніше реалізуємо перемикач для користувача для їх зміни; ми додаємо тут атрибут ID, щоб посилатися на цей елемент у коді JavaScript.

Блиск

Тепер давайте додамо трохи блиску на верхній частині пластинки:

При обертанні пластинка буде зміщуватися трохи вправо та донизу, так що ми робимо область з блиском трохи меншою, ніж пластинка, так що вона не виходить за межі останньої при обертанні. У цього елемента також є атрибут ID для реагування на дії користувача.

Шпиндель

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

У цій фігурі використовується створений нами металевий градієнт. Також ми використовуємо другий фільтр для додання падаючої тіні, в якому застосовується змішування, завдяки чому відображуються і фігура, і тінь.

Кнопка

Останній, але не менш важливий момент полягає у тому, що нам потрібно додати кнопку, за допомогою якої користувачі можуть контролювати зміну пластинок, для якої будуть використовуватися ті ж самі заливка та фільтр, як і для шпинделя:

Цього разу замість самозакривного елемента ми використовуємо відкривний та закривний теги елемента circle. Це так, оскільки ми будемо анімувати кнопку, коли користувачі натискають її, і цей елемент буде містити анімаційний ефект між цими тегами. Зверніть увагу на те, що ми змогли повторно скористатися елементами fill та filter із розділу defs. Нижче наводиться початковий вигляд зображення, який маємо після того, як розміри сторінки визначено:

record player initial appearance

Крок 5: Додаємо анімацію

Кожний елемент, який ви додаєте до SVG, буде відображуватися зверху раніше доданих елементів.

Тепер, коли наші візуальні елементи на місці, давайте додамо пару анімаційних ефетів. Ми можемо зробити так, щоб пластинка оберталася, за допомогою анімації трансформацій SVG, які є розширенням анімацій SMIL (* Synchronized Multimedia Integration Language – синхронізована мова для інтеграції мультимедіа; мова розмітки для опису мультимедійних презентацій). Ці анімаційні ефекти визначаються у розмітці SVG. Ефект застосовується до будь-якого елементу SVG, в якому він з'являється. Ви можете використовувати трансформації CSS3 для елементів SVG, проте при використанні альтернативних рішень на основі SMIL вам надається більше можливостей для їх контролю.

Ми додамо два простих анімаційних ефекти: пластинка буде обертатися та кнопка буде трохи зміщуватися при натисненні її користувачем. Давайте почнемо з трохи простішого ефекту для кнопки.

Всередині елемента кнопки, між створеними нами відкривним та закривним тегами, додайте елемент animateTransform наступним чином:

аnimateTransform застосовується до атрибута XML елемента, в якому він з'являється. У нашому випадку це трансформація translatе. Атрибути from та to є стартовою та кінцевою позиціями елемента – вони вказуються відносно його стартової позиції, так що кнопка буде зміщуватися вправо та донизу на один піксель. Трансформація буде починатися після натиснення кнопки користувачем, тривати впродовж однієї десятої секунди та виконуватися один раз. Кнопка буде повертатися до вихідної позиції по завершенні анімації. Порада: для того щоб залишити елемент у його кінцевій позиції після завершення анімації, вкажіть fill="freeze".

Тепер переходимо до обертання пластинки, аnimateTransform застосовується до елемента SVG, проте нам потрібно, щоб ефект обертання застосовувався до більш ніж одного елемента, а саме до пластинки та наклейки (але не до блиску або тіні). Замість того щоб створювати окремі анімації для кожного елемента та виконувати їх одночасно, ми можемо використовувати єдину трансформацію завдяки групуванню цих елементів разом. Перед елементом circle, використовуваним для реалізації пластинки (для якого використовується "recordGrad" в якості заливки), додайте відкривний груповий тег:

Після елемента circle, використовуваного для реалізації наклейки, закрийте групу:

Тепер додайте трансформацію перед цим закривним груповим тегом, так щоб він застосовувався до цілої групи:

Цього разу у якості анімаційного ефекту використовується трансформація rotate (* обертання). Елемент буде обертатися на 360 градусів, і, для підсилення ефекту, від буде зміщуватися вправо та донизу на один піксель при кожному оберті, який триває впродовж однієї секунди, що буде повторюватися нескінченно довго. Також у цій трансформації буде атрибут from, оскільки він потрібен для задання початкової позиції обертаючихся елементів. Якщо ви не вказуєте цю позицію, то за налаштуванням елементи обертаються навколо точки з координатами 0, 0. Проте у цей момент ви не можете вказати відносні (тобто ті, які вказуються у процентах) значення для цих атрибутів, а тільки заздалегідь вказані значення. Через це ми задамо значення атрибуту from, коли встановимо розміри SVG у коді JavaScript.


Крок 6: Додаємо можливість взаємодії

Тепер давайте реалізуємо наші функції для додання можливості взаємодії з програвачем: натиснення кнопки для зміни пластинки та натиснення на пластинку для її сповільнення.

Заміна пластинки

Для початку у розділі вашої сторінки для додавання скриптів, додайте наступні змінні для підрахування кількості та відстеження дизайнів наклейки:

Тепер усередині відкривного тегу елемента circle, що представляє кнопку (у якому тепер є анімаційний ефект між його тегами), додайте наступний обробник події click:

Повертаємося назад до розділу у заголовку для додання скриптів, додаємо каркас функції:

Кожного разу при натисненні користувачем кнопки ми переходимо до наступної наклейки, повертаючись до першої по досягненні останньої:

В останньому рядку тут продемонстровано, що ви можете взаємодіяти з елементами SVG за допомогою методів DOM таким же чином, як би ви робили з іншими елементами веб-сторінки. Тут ми налаштували атрибут fill елемента circle наклейки на використання наступної градієнтної заливки завдяки вказанню ID заливки.

record label alternative

Сповільнення пластинки

Тепер додайте наступні обробники подій для елемента, використовуваного для реалізації блиску пластинки (для якого у якості значення заливки встановлено "shineGrad"), оскільки ми будемо використовувати виникаючі при взаємодії з ним події mousedown та mouseup для сповільнення пластинки і її повторного прискорення:

Повертаємося назад до розділу для додання скриптів, додаємо функцію для тих моментів, коли користувач натискає на пластинку:

Всередині цієї функції ми можемо сповільнити анімаційний ефект обертання пластинки завдяки зміні значення атрибуту animateTransform для встановлення тривалості анімації: Також ми змінюємо прозорість блиску для того, щоб створити враження, неначе відбулося натиснення:

Коли користувач відпускає пластинку, ми хочемо, щоб повернувся її попередній вигляд та швидкість, так що далі додаємо функцію, що запускається при виникненні події mouseup:


Крок 7: Задаємо розмір

Нарешті, тепер ми можемо задати найбільший розмір SVG. Зверху розділу для додання скриптів додайте нову змінну:

Ми початково задамо в якості значення ширини та висоти зображення 300 пікселів, проте ви можете запросто змінити це значення будь-коли. Визначаємо функцію у розділі для додання скриптів для встановлення цих розмірів:

Ми встановили розмір елемента-контейнеру div. Погляньте на секунду на останій рядок у цій функції. Оскільки для анімації транформації rotate не можуть бути використані відносні значення, вказані у процентах, ми повинні задати значення атрибута from за допомогою змінної size (значення якої поділено на 2 для вказання на центр пластинки). При значенні розміру SVG 300 трансформація з фіксованими значеннями виглядала би наступним чином:

За бажанням ви можете використовувати фіксовані значення у вашій SVG. Ми застосовуємо цей прийом тільки для того, щоб продемонструвати, як використовувати відносні розміри. Нарешті, викличте наступну функцію у кінці розділу для додання скриптів:


Завершення

Наша інтерактивна анімація SVG тепер завершена! Відкрийте вашу сторінку у браузері з підтримкою описаних тут можливостей для перегляду ефекту; не забудьте спробувати повзаємодіяти з пластинкою та кнопкою. Спробуйте змінити значення змінної для встановлення розміру, щоб побачити, як всі елементи SVG підлаштовуються, включаючи елементи для додавання анімацій та взаємодій.

Якщо би ви хотіли поглибити свої пізнання в області SVG, то деякі теми, на які варто було би звернути увагу, включають шляхи, текст, маскування та обрізування. Також вам для розглядання є рід додаткових варіантів анімацій. Звичайно, просто зараз ці ефекти не будуть працювати для всіх користувачів, але, будемо сподіватися, незабаром ...

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.