Приклад з використанням svg

Попередня ↔ Наступна

D3 найбільш корисний, коли використовується для створення та маніпулювання візуальними образами на основі SVG. Малювання з використанням div 'ов та інших HTML-елементів можливо, але трохи незграбно, і зазвичай з'являються невідповідності відображення в різних браузерах. Використання SVG більш надійно, візуально послідовно і швидше.

елемент SVG

Scalable Vector Graphics (масштабована векторна графіка) - формат зображень на основі тексту. Кожне SVG-зображення визначено з використанням розмітки коду, схожою на HTML. SVG-код може бути включений безпосередньо в HTML-документ. Кожен веб-браузер підтримує SVG, винятком є лише Internet Explorer версії 8 і старше. SVG заснований на XML, тому ви можете помітити, що елементи, які не мають закриває тега, повинні бути такими, що зачиняються. наприклад:

Тут SVG-елемент, створений з використанням коду вище:

Зауважте, що тут є SVG-елемент, який займає 500 пікселів по горизонталі і 50 пікселів по вертикалі.

Також зауважте, що браузери вважають пікселі одиницею виміру за замовчуванням. Ми вказали розміри як 500 і 50, а не 500px і 50px. Ми можемо вказати px явно, або будь-яку іншу одиницю виміру, наприклад: em. pt. in. cm. і mm.

прості фігури

Існує певний набір фігур, які ви можете помістити всередину елемента SVG. Цей набір включає: rect. circle. ellipse. line. text і path.

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

rect малює квадрат. Квадрат задається чотирма значеннями: x. y - вказують точку верхнього лівого кута; width. height - вказують ширину і висоту квадрата. Цей квадрат займає весь простір нашого SVG:

circle малює коло. Коло задається трьома величинами: cx. cy вказують точку, розташовану в центрі описуваної окружності, r задає радіус кола. Це коло розташований в центрі нашого SVG, бо атрибут cx ( "center-x") дорівнює 250. Приклад:

ellipse задається схоже з circle. але передбачається, що радіус задається по двох осях: по х і по у. Замість х використовуйте rx. замість y - ry.

line малює лінію. Використовуйте x1 і y1 для завдання координат початку лінії, і x2 і y2 для завдання координат кінця. Атрибут stroke повинен задавати колір лінії, інакше вона буде невидима.

text отрісовиваєт текст. Використовуйте x. щоб вказати лівий край, і y. щоб вказати вертикальну позицію так званої базової лінії.

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

Також зауважте, коли будь-який візуальний елемент впирається в межу SVG-елемента, він буде обрізаний. Будьте обережні, коли використовуєте text. щоб ваші загагуліни у тексту не були обрізані. Ви можете побачити, що трапиться з текстом, якщо виставити baseline (тобто у) рівним 50, таку ж, як висота SVG:

path малює щось більш складне, ніж фігури, описані вище (наприклад, силует країн на геокартах), і буде описаний окремо. А тепер ми будемо працювати з простими фігурами.

Стилізація SVG-елементів

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

fill - заливка. Кольорове значення. Також як і в CSS колір може бути вказаний декількома способами:
- по імені: orange;
- значення в шістнадцятковій системі числення: # 3388aa. # 38a;
- значення в форматі RGB: rgb (10, 150, 20);
- значення в форматі RGBA: rgba (10, 150, 20, 0.5).
stroke - рамка. Кольорове значення.
stroke-width - ширина рамки (зазвичай в пікселях).
opacity - прозорість. Числове значення в проміжку від 0.0 (повністю прозоро) до 1.0 (повністю мабуть).

З text також можна використовувати такі властивості:

Існує два способи застосування стилів до SVG-елементам: або безпосередньо прописувати стилі всередині елемента як його атрибути, або через правила CSS.

Нижче деякі CSS-властивості задані безпосередньо в елементі circle:

По-іншому ми могли б зробити так: не прописувати атрибути стилю, а вказати клас стилів (також як і звичайного HTML елементу):

а потім додати fill. stroke і stroke-width параметри в CSS-стилі необхідного класу:

Другий підхід має кілька очевидних переваг:

Можна описати клас один раз і застосовувати його до багатьох елементів.
CSS-код простіше сприймати, ніж атрибути всередині елементів.
З цих причин другий підхід більш простий в обслуговуванні, а також він швидше застосуємо.

Використання CSS для застосування стилів до SVG, проте, може когось привести в замішання. fill. stroke. stroke-width все-таки не CSS-властивості (найближчі CSS-еквіваленти це background-color і border). Щоб допомогти вам запам'ятати, які правила в таблиці стилів вказані для SVG-елементів, бажано включати svg в CSS-селектор:

Накладення і порядок їх малювання

У SVG немає як таких шарів і ніякого поняття глибини. SVG не підтримує CSS-властивість z-index. таким чином фігури можуть бути впорядковані в рамках двомірного простору.

І ще, якщо намалювати кілька фігур, то вони перекриваються:

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

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

прозорість

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

Існує два способи застосувати прозорість: використовувати RGB-колір з альфа-каналом або встановити властивості opacity числове значення.

Ви можете використовувати rgba () скрізь, де треба вказати колір, наприклад в атрибутах fill і stroke. rgba () очікує, що ви передасте йому 3 значення в проміжку від 0 до 255 для червоного, зеленого і синього, плюс альфа-канал (прозорість) в діапазоні від 0.0 до 1.0.

Зауважте, що з методом rgba (). прозорість застосовується до fill і stroke атрибутам незалежно. Заливка наступних кіл на 75% прозора, а їх рамка - на 25%:

Для застосування прозорості до всього елементу, необхідно встановити атрибут opacity. Нижче повністю видимі кола:

а це ті ж кола з різною прозорістю:

Ви також можете використовувати атрибут opacity у елемента, кольори якого задані в форматі rgba (). Коли ви це робите - прозорість множиться. Нижче кола використовують ті ж значення кольору RGBA для fill і stroke. У першого елемента не встановлено атрибут opacity. а у двох інших встановлено: