Istoriya.v.ua

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

У вашому випадку так і сталося. + у вас ще була заливання.

Повторюся, потрібно використовувати тільки лінії.

Привіт!
Дякуємо за роз'яснення!
Підкажіть будь ласка, як для таких анімацій підбирається чи обчислюється значення dasharray та dashoffset?

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

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

У цій статті ми не заглиблюватимемося в складні елементи SVG, такі як path. Наша мета – розглянути практичні аспекти роботи з простими SVG.Коли справа доходить до малювання кривих (curves), я рекомендую використовувати інструменти типу Illustrator або Affinity. Однак, якщо ви захочете поекспериментувати зі складовими лініями, знання path може стати в нагоді. Можливо, ми повернемося до цієї теми до однієї з наступних статей.

Основна увага в цьому посібнику приділена практичним прикладам, які допоможуть зрозуміти деякі математичні аспекти створення SVG-графіки. Для більш глибокого вивчення специфікацій SVG раджу звернутися до статті "A Practical Guide to SVG and Design Tools".

❯ Малювання за допомогою математики. Пам'ятаєте про системи координат?

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

Як працює SVG? unit! = unit

Перш ніж ми заглибимося в технічні деталі малювання елементів SVG, варто розібратися в особливостях роботи з одиницями виміру в цьому форматі.
Головна властивість SVG – це векторний формат, який дозволяє йому бути незалежним від розмірів екрану. Одиниці вимірювання в SVG відв'язані від фізичних характеристик пристрою і натомість відносяться до внутрішньої координатної системи документа.
Простіше кажучи, під час роботи з SVG ми не оперуємо пікселями або іншими фіксованими одиницями, а використовуємо умовні числові значення, а вже потім визначаємо розмір документа.
Таким чином, хоча width і height SVG-зображення можуть задаватися за допомогою звичних CSS-одиниць, наприклад rem, всередині атрибута viewBox ці величини стають абстрактними числами. Інакше кажучи, одиниці виміру в viewBox служать лише визначення відносних пропорцій і прив'язані до конкретним фізичним розмірам.

Що таке viewBox?

viewBox працює приблизно так само, як властивість aspect-ratio у CSS. Він допомагає встановити співвідношення між шириною та висотою системи координат та задає межі робочої області. Я зазвичай розглядаю viewBox як "розмір документа".
Будь-який елемент, розміщений всередині SVG, габарити якого перевищують розмір viewBox, буде обрізатися. Таким чином, viewBox це зріз системи координат, який ми бачимо на екрані. За наявності атрибута viewBox, атрибути width і height стають необов'язковими.
Іншими словами, наявність viewBox робить поведінку SVG дуже схожою на звичайне зображення. І як і із зображеннями, зазвичай зручніше задати або width, або height, дозволивши другому розміру підлаштуватися автоматично зі збереженням вихідних пропорцій.
Отже, при створенні функції для відтворення SVG нам потрібно було б зберігати три окремі змінні і заповнювати їх таким чином:

`"viewBox="0 0 $ $" xmlns="http://www.w3.org/2000/svg" >`;

Важливі особливості SVG

Можливості SVG набагато ширші, ніж може здатися на перший погляд. За допомогою тега use можна перетворити зображення, що часто використовується, в symbol ; можна об'єднувати SVG-елементи в спрайти (sprites), а також застосовувати спеціальні рекомендації щодо використання SVG як іконки.
Однак, детальний розгляд цих аспектів виходить за межі цієї статті. Тут ми зосередимося насамперед на створенні SVG-файлів, а не на їх використанні та оптимізації.
Проте є одна важлива тема, яку варто торкнутися. доступність SVG.
SVG-зображення можна використовувати всередині тега де доступний атрибут alt. Однак такий підхід обмежує можливості взаємодії з SVG-кодом. Тому в багатьох випадках найкращим варіантом буде вбудовування SVG безпосередньо в HTML-код сторінки.
Достатньо просто додати атрибут role="img" до SVG-елементу, а потім додати тег із назвою зображення.
Примітка: Докладніші рекомендації щодо доступності SVG-зображень можна знайти в цій статті.

❯ Створення SVG за допомогою JavaScript

Працюючи з SVG часто доводиться вдаватися до математичним розрахункам, часом досить простим, котрий іноді досить складним (наприклад, при побудові каліграфічних сіток потрібно використовувати тригонометрію). Але, незважаючи на просту математику, багато хто воліє не писати SVG-код на чистому HTML, а хочуть використовувати алгебру.
Особисто мені набагато простіше розуміти SVG-код, коли можу давати змінним осмислені назви, ніж оперувати набором цифр. Тому у своїй практиці я завжди використовую JS.
Таким чином, у наступних прикладах ми розглянемо необхідні змінні та прості математичні вирази, а потім, як можна використовувати шаблонні рядки (Template literals) (в стилі JSX) для більш читабельної інтерполяції.
Щоб зробити це керівництво незалежним від конкретних фреймворків, я хочу коротко розглянути створення SVG-елементів за допомогою чистого JS.
Ми почнемо зі створення контейнерного елемента HTML, в який буде поміщений SVG, і отримаємо посилання на цей елемент через JS.

Для простоти прикладу ми намалюємо прямокутник із заливкою, що займає весь viewBox.
Примітка: для заливки можна застосовувати будь-які допустимі в CSS значення, від фіксованих кольорів до динамічних значень, як currentColor або CSS-змінні. Це зручно, якщо SVG вбудовується безпосередньо в HTML-сторінку і має успадковувати її стильове оформлення.
Визначимо необхідні змінні:

// Змінні const container = document.querySelector("[data-svg-container]"); const svgWidth = "30rem"; // використовуємо будь-яке значення з одиницями виміру const documentWidth = 100; const documentHeight = 100; const rectWidth = documentWidth; const rectHeight = documentHeight; const rectFill="currentColor"; // використовуємо будь-яке допустиме значення кольору const title = "A simple square box";

Метод 1. Створення елемента та встановлення атрибутів

Даний метод простіший у плані забезпечення типобезпеки (у разі використання TypeScript) — він задіює коректні елементи, атрибути SVG і т.д. Однак, він менш продуктивний і може вимагати значно більше часу, якщо йдеться про велику кількість елементів.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const titleElement = document.createElementNS("http://www.w3.org/2000/svg", "title"); const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); svg.setAttribute("width", svgWidth); svg.setAttribute("viewBox", `0 0 $ $`); svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); svg.setAttribute("role", "img"); titleElement.textContent = title; rect.setAttribute("width", rectWidth); rect.setAttribute("height", rectHeight); rect.setAttribute("fill", rectFill); svg.appendChild(titleElement); svg.appendChild(rect); container.appendChild(svg);

Метод 2. Створення SVG-рядка

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

container.innerHTML = `  `;

Метод 3. Беремо найкраще від двох варіантів

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

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", svgWidth); svg.setAttribute("viewBox", `0 0 $ $`); svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); svg.setAttribute("role", "img"); svg.innerHTML = `$" height="$" fill="$" /> `;container.appendChild(svg);

Відображення базових елементів

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

Малювання прямокутників

1. Верхній лівий: це звичайний прямокутник зі зміщенням по верхньому та лівому краях та заданими шириною та висотою.
2. Верхній правий: тут застосовуємо невеликий радіус заокруглення кутів, щоб отримати закруглений прямокутник.
3. Нижній лівий: у цьому випадку радіус заокруглення настільки великий, що прямокутник перетворюється на коло. При цьому його початок координат трохи зміщений.
4. Нижній правий: використовується еліптичний радіус заокруглення для створення згладженої квадратної форми.

Розглянемо, як реалізувати ці прямокутники за допомогою JS:

const rectDocWidth = 200; const rectDocHeight = 200; const rectFill="currentColor"; const docOffset = 15; const rectSize = rectDocWidth/2 - docOffset *2; const roundedCornerRadius = 10; const circleLookRadius = rectSize/2; const ellipticalRy = roundedCornerRadius *2;

Щоб відобразити ці прямокутники в SVG, використовуємо відповідні змінні до шаблону елемента:

 viewBox= $`> xmlns="http://www.w3.org/2000/svg" role="img" >  y= width= height= fill= /> rx= y= width= height= fill= /> rx= y= width= height= fill= /> rx= ry= y= width= height= fill= /> 

Малювання ліній

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

Вміння малювати горизонтальні та вертикальні лінії – досить важлива навичка. Правило просте: для горизонтальної лінії повинні збігатися значення y початкової і кінцевої точок, а вертикальної лінії — значення x .

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

const lineDocWidth = 421; const lineDocHeight = 391; const lineStroke="currentColor"; const lineStrokeWidth = 5; const horizontalLineStart = 0; const horizontalLineEnd = lineDocWidth; const horizontalLineY = lineDocHeight/2; const verticalLineStart = 0; const verticalLineEnd = lineDocHeight; const verticalLineX = lineDocWidth/2;

Інтегруємо їх у SVG-елемент:

 viewBox= $`> xmlns="http://www.w3.org/2000/svg" role="img" >  x2= y1= y2= stroke= stroke-width= /> x2= y1= y2= stroke= stroke-width= /> 

Малювання кіл

Елемент SVG має атрибути cx , cy і r , які визначають координати центру кола і його радіус.

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

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

const circleDocWidth = 100; const circleDocHeight = 100; const circleOffset = 10; const circleDiameter = 20; const circleRadius = circleDiameter/2; const circleX = circleOffset + circleRadius; const circleY = circleDocHeight - circleOffset - circleRadius;

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

 viewBox= $`> xmlns="http://www.w3.org/2000/svg" role="img" > cy= r= fill="red" /> 

Малювання еліпсів

Елемент SVG має атрибути cx , cy , rx і ry , які визначають координати центру еліпса, а також його горизонтальний і вертикальний радіуси.

Значення x та y задають положення центру еліпса, а rx і ry описують його радіуси по горизонталі та вертикалі, відповідно.

Припустимо, що нам необхідно намалювати еліпс, зміщений від верхнього правого кута на певну відстань, з горизонтальним радіусом заданого розміру і вертикальним радіусом, що дорівнює половині горизонтального.

Для цього визначимо такі змінні:

const ellipseSVGWidth = 100; const ellipseDocWidth = 100; const ellipseDocHeight = 100; const ellipseOffset = 10; const ellipseHorizontalRadius = ellipseDocWidth/2 - ellipseOffset; const ellipseVerticalRadius = ellipseHorizontalRadius / 2; const ellipseX = ellipseDocWidth - ellipseOffset - ellipseHorizontalRadius; const ellipseY = ellipseOffset + ellipseVerticalRadius;

Інтегруємо в SVG-елемент:

 viewBox= $`> xmlns="http://www.w3.org/2000/svg" role="img" >  cy= rx= ry= fill="hotpink" /> 

З'єднання точок за допомогою та

Іноді нам потрібно створити лінію, що складається з кількох точок, але не утворює прямокутник чи коло. У таких випадках можна використовувати елементи polyline та polygon, які мають однакові атрибути, але відрізняються способом з'єднання першої та останньої точок: polygon замикає фігуру, а polyline – ні.

Обидва елементи застосовують атрибут points , що містить список координат x і y розділених пробілами.За замовчуванням вони встановлені fill (заливка), що завжди доречно, особливо для polyline , тому часто доводиться ставити їй значення none .

Допустимо, у нас є три кола, і ми хочемо поєднати їхні центри лініями. Для цього достатньо взяти координати cx і cy цих кіл і об'єднати в атрибуті points .

Важливо пам'ятати, що SVG малюється від заднього плану до переднього, тому спочатку будуть намальовані кола, а потім лінії, які виявляться зверху кіл.

Щоб наочно продемонструвати різницю між polyline і polygon , ми намалюємо композицію чотири рази, як робили з колами.

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

Щоб заощадити час на налаштуванні положення кожного окремого елемента композиції, ми можемо застосувати transform до групи, щоб розмістити її у різних квадрантах.

Для цього використовується атрибут transform="translate(x,y)" , що працює аналогічно до CSS-трансформацій, з невеликими відмінностями в синтаксисі. У більшості простих випадків ми можемо припускати, що він працює так само. Атрибут translate переміщує вміст групи вздовж осей x і y.

Зліва направо, знизу вгору: polyline без заливки, polyline із заливкою, polygon без заливки, polygon із заливкою

Тут ми бачимо, що при використанні тих самих координат, polyline не з'єднує лінією синю і червону точки, на відміну від polygon . Але при застосуванні заливки вони обидва сприймають форму як замкнуту, що видно на правому верхньому квадранті.

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

Але спочатку давайте реалізуємо базовий варіант, як ми робили раніше.Ми створимо об'єкти для кіл, а потім об'єднаємо значення cx і cy, щоб створити атрибут points. Також збережемо наші трансформації в змінних.

const polyDocWidth = 200; const polyDocHeight = 200; : "lime" >; cy: 60, r: 8, fill: "cyan" >; const points = `$,$ $,$`; $)`; const moveToBottomLeft = `translate(0, $)`;

Далі, застосовуємо ці змінні до шаблону, використовуючи або polyline або polygon , а також атрибут fill з колірним значенням або none .

 viewBox= $`> xmlns="http://www.w3.org/2000/svg" role="img" >   cy= r= fill= /> cy= r= fill= /> cy= r= fill= /> fill="none" stroke="black" /> > cy= r= fill= /> cy= r= fill= /> cy= r= fill= /> fill="white" stroke="black" /> > cy= r= fill= /> cy= r= fill= /> cy= r= fill= /> fill="none" stroke="black" /> > cy= r= fill= /> cy= r= fill= /> cy= r= fill= /> fill="white" stroke="black" /> 

❯ Боротьба з повтореннями

При створенні SVG-графіки можна зіткнутися з необхідністю багаторазового повторення одного і того ж коду. У цих випадках JS може стати надійним помічником.

• у нас є три елементи circle, наступні одному і тому ж шаблону
• ми повторюємося, щоб змінити стиль заливки елемента
• ми повторюємо ці два елементи ще раз, використовуючи або polyline , або polygon
• у нас є чотири різні трансформації (у даному випадку відсутність трансформації також можна вважати трансформацією)

Висновок: ми можемо застосувати вкладені цикли.

Повернімося до простої реалізації, оскільки способи використання циклів істотно різняться між різними фреймворками.

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

Я вирішила використовувати масиви для кожного типу, а потім написала допоміжну функцію, яка перебирає дані та формує масив об'єктів з усією необхідною інформацією для кожної групи. При такому невеликому обсязі даних цілком можна було б зберігати все в одному елементі, де значення повторюються, але в даному випадку ми серйозно ставимося до принципу DRY (Don't Repeat Yourself).

const container = document.querySelector("[data-svg-container]"); const svgWidth = 200; const documentWidth = 200; const documentHeight = 200; const halfWidth = documentWidth/2; const halfHeight = documentHeight/2; const circles = [ < cx: 25, cy: 80, r: 10, fill: "red" >, < cx: 40, cy: 20, r: 5, fill: "lime" >, < cx: 70, cy : 60, r: 8, fill: "cyan" >, ]; const points = circles.map((< cx, cy >) => `$,$`).join(" "); const elements = ["polyline", "polygon"]; const fillOptions = ["none", "white"]; const transforms = [ undefined, `translate($, 0)`, `translate(0, $)`, `translate($, $)`, ]; const makeGroupsDataObject = () => < let counter = 0; const g = []; elements.forEach((element) => < fillOptions.forEach((fill) =>< const transform = transforms[counter++]; g.push(< element, fill, transform >); >); >); return g; >; const groups = makeGroupsDataObject(); // result: // [ // < // element: "polyline", // fill: "none", // >, // < // element: "polyline", // fill: "white", / / transform: "translate(100, 0)", // >, // < // element: "polygon", // fill: "none", // transform: "translate(0, 100)", // >, // < // element: "polygon", // fill: "white", // transform: "translate(100, 100)", // >// ] const svg = document.createElementNS("http://www.w3.org/2000 /svg", "svg"); svg.setAttribute("width", svgWidth); svg.setAttribute("viewBox", `0 0 $ $`); svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); svg.setAttribute("role", "img"); svg.innerHTML = ""; groups.forEach((groupData) => < const circlesHTML = circles .map((circle) =>< return ` " cy="$" r="$" fill="$" />`; >) . join(""); const polyElementHTML = `points="$" fill="$" stroke="black" />`; "">> $ `; svg.innerHTML += group;

❯ Захоплюючі можливості SVG

Ми розглянули базові аспекти роботи з SVG, але насправді можливості цього формату набагато ширші.Крім трансформацій (transform), про які ми говорили, можна застосовувати маски (mask), маркери (marker) та багато іншого.

На жаль, ми не зможемо поринути у всі ці цікаві теми прямо зараз. Але оскільки наше знайомство з SVG почалося зі створення сіток для каліграфії, я б хотіла розповісти вам про дві найцікавіші фішки, які, на жаль, я не можу використовувати у своєму генераторі. Справа в тому, що я прагнула зробити так, щоб згенеровані SVG-файли можна було відкривати в Affinity, а ця програма не підтримує шаблони (pattern).

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

Сітка графіка за допомогою pattern

Якщо подумати, графік є набір горизонтальних і вертикальних ліній, що повторюються вздовж осей X і Y.

У цьому випадку відмінним рішенням буде використання шаблонів SVG. Ми можемо створити і потім вказати шаблон у його атрибуті fill. Сам шаблон буде мати свої width, height і viewBox, які визначають, як він повторюватиметься.

Припустимо, ми хочемо розмістити сітку графіка по центру, при цьому мати можливість задавати розміри квадратних осередків.

Для цього нам знадобиться кілька змінних:

const graphDocWidth = 226; const graphDocHeight = 101; const cellSize = 5; const strokeWidth = 0.3; const strokeColor = "currentColor"; const patternHeight = (cellSize/graphDocHeight) * 100; const patternWidth=(cellSize/graphDocWidth)*100; const gridYStart = (graphDocHeight % cellSize) / 2; const gridXStart = (graphDocWidth % cellSize) / 2;

Інтегруємо їх у SVG-елемент:

 viewBox= $`> xmlns="http://www.w3.org/2000/svg" role="img" >   width="100%" height=%`> > y1= y2= stroke= stroke-width= />  width=%`> height="100%" > y2= x1= x2= stroke= stroke-width= />   height= fill="url(#horizontal)" /> height= fill="url(#vertical)" /> 

Сітка з крапок за допомогою pattern

Якщо нам потрібна не лінійна, а точкова сітка, замість ліній, що повторюються, ми можемо використовувати кола. Або, як альтернативний варіант, пунктирні лінії, створені за допомогою властивостей stroke-dasharray і stroke-dashoffset. В останньому випадку нам знадобиться лише одна лінія.

const dotDocWidth = 219; const dotDocHeight = 100; const cellSize = 4; const strokeColor = "black"; const gridYStart = (dotDocHeight % cellSize) / 2; const gridXStart = (dotDocWidth % cellSize) / 2; const dotSize = 0.5; const patternHeight = (cellSize / dotDocHeight) * 100;

Додаємо змінні до SVG-елементу:

 viewBox= $`> xmlns="http://www.w3.org/2000/svg" role="img" >   width="100%" height=%`> > y1= x2= y2= stroke= stroke-width= stroke-dasharray=`> stroke-linecap="round" >     

❯ Висновок

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

1. Ми вивчаємо проблему.
2. Розбиваємо її на дрібніші частини.
3. Досліджуємо кожну координату та її математичне уявлення.
4. А потім збираємо все докупи.

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