SVG Довідник
SVG Елементи
| Елемент | Опис | Атрибути |
|---|---|---|
| <a> | Створює зв’язок навколо елементів SVG | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | Забезпечує керування гліфами, які використовуються для відтворення певних символьних даних | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | Визначає набір замін для гліфів | id |
| <altGlyphItem> | Визначає набір варіантів замін гліфів | id |
| <animate> | Визначає, як атрибут елемента змінюється з часом | attributeName="ім’я цільового атрибута" by="значення відносного зсуву" from="початкове значення" to="кінцеве значення" dur="тривалість" repeatCount="скільки часу триватиме анімація" |
| <animateMotion> | Змушує елемент, на який посилається, рухатися по шляху руху | calcMode="режим інтерполяції для анімації. Може бути 'discrete', 'linear', 'paced', 'spline'" path="шлях руху" keyPoints="як далеко вздовж траєкторії руху об’єкт повинен переміститися в даний момент часу" rotate="застосовує перетворення обертання" xlink:href="посилання URI на елемент <path>, який визначає шлях руху" |
| <animateTransform> | Анімує атрибут transformation цільового елемента, таким чином дозволяючи анімаціям контролювати переклад, масштабування, обертання та/або перекіс | by="значення відносного зсуву" from="початкове значення" to="кінцеве значення" type="тип перетворення, значення якого змінюються з часом. Може бути 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | Визначає коло | cx="центр осі x кола" cy="центр осі Y кола" r="Радіус кола". Обов’язково. + атрибути презентації: Color, FillStroke, Graphics |
| <clipPath> | Відсікання (Clipping) — це приховування того, що зазвичай було б намальовано. Трафарет, який визначає, що є, а що ні, називається відсічним контуром | clip-path="відсічний контур, на який посилається, перетинається з відсічним контуром, на який посилається" clipPathUnits="'userSpaceOnUse' або 'objectBoundingBox'. Друге значення робить одиниці дочірніх елементів частиною рамки об’єкта, яка використовує маску (за замовчуванням: 'userSpaceOnUse')" |
| <color-profile> | Визначає опис профілю кольору (якщо документ оформлено за допомогою CSS) | local="унікальний ID для локально збереженого колірного профілю" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="URI ресурсу профілю ICC" |
| <cursor> | Визначає незалежний від платформи спеціальний курсор | x="верхній лівий кут курсору осі X (за замовчуванням 0)" y="верхній лівий кут курсору по осі Y (за замовчуванням 0)" xlink:href="URI зображення, яке буде використовуватися як курсор |
| <defs> | Контейнер для елементів, на які посилаються | |
| <desc> | Лише текстовий опис для елементів контейнера або графічних елементів у SVG (агенти користувача можуть відображати текст як виринаючу підказку) | |
| <ellipse> | Визначає еліпс | cx="центр осі X еліпса" cy="центр осі Y еліпса" rx="довжина радіуса еліпса вздовж осі X". Обов’язково. ry="довжина радіуса еліпса вздовж осі Y". Обов’язково. + атрибути презентації: Color, FillStroke, Graphics |
| <feBlend> | Компонує два об’єкти разом відповідно до певного режиму змішування | mode="режими змішування зображень: normal|multiply|screen|darken|lighten" in="ідентифікує вхідні дані для заданого примітиву фільтра: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="друге вхідне зображення для операції змішування" |
| feColorMatrix | Фільтр SVG. Застосовує матричне перетворення | |
| feComponentTransfer | Фільтр SVG. Виконує покомпонентне перевідображення даних | |
| feComposite | SVG фільтр. | |
| feConvolveMatrix | SVG фільтр. | |
| feDiffuseLighting | SVG фільтр. | |
| feDisplacementMap | SVG фільтр. | |
| feDistantLight | SVG фільтр. Визначає джерело світла | |
| feFlood | SVG фільтр. | |
| feFuncA | SVG фільтр. Піделемент до feComponentTransfer | |
| feFuncB | SVG фільтр. Піделемент до feComponentTransfer | |
| feFuncG | SVG фільтр. Піделемент до feComponentTransfer | |
| feFuncR | SVG фільтр. Піделемент до feComponentTransfer | |
| feGaussianBlur | SVG фільтр. Виконує розмиття зображення за Гаусом | |
| feImage | SVG фільтр. | |
| feMerge | SVG фільтр. Створює шари зображень один над одним | |
| feMergeNode | SVG фільтр. Піделемент до feMerge | |
| feMorphology | SVG фільтр. Здійснює "відгодівлю" або "проріджування" на вихідній графіці | |
| feOffset | SVG фільтр. Переміщує зображення відносно його поточного положення | |
| fePointLight | SVG фільтр. | |
| feSpecularLighting | SVG фільтр. | |
| feSpotLight | SVG фільтр. | |
| feTile | SVG фільтр. | |
| feTurbulence | SVG фільтр. | |
| filter | Контейнер для ефектів фільтра | |
| font | Визначає шрифт | |
| font-face | Описує характеристики шрифту | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | Використовується для групування елементів | id="назва групи" fill="колір заливки для групи" opacity="непрозорість для групи" + атрибути презентації: Все |
| glyph | Визначає графіку для певного гліфа | |
| glyphRef | Визначає можливий гліф для використання | |
| hkern | ||
| <image> | Визначає зображення | x="верхній лівий кут зображення по осі X" y="верхній лівий кут зображення по осі Y" width="ширина зображення". Обов’язково. height="висота зображення". Обов’язково. xlink:href="шлях до зображення". Обов’язково. + атрибути презентації: Color, Graphics, Images, Viewports |
| <line> | Визначає лінію | x1="початкова точка x лінії" y1="початкова точка y лінії" x2="кінцева точка x лінії" y2="кінцева точка y лінії" + атрибути презентації: Color, FillStroke, Graphics, Markers |
| <linearGradient> | Визначає лінійний градієнт. Лінійні градієнти заповнюють об’єкт за допомогою вектора та можуть бути визначені як горизонтальні, вертикальні або кутові градієнти. | id="унікальний ідентифікатор, який використовується для посилання на цей шаблон. Обов’язково посилатися на це" gradientUnits="'userSpaceOnUse' або 'objectBoundingBox'. Використовуйте поле перегляду або об’єкт, щоб визначити взаємне розташування векторних точок. (За замовчуванням 'objectBoundingBox')" gradientTransform="трансформація для застосування до градієнта" x1="початкова точка x вектора градієнта (число або % - 0% за замовчуванням)" y1="початкова точка y вектора градієнта. (0% за умовчанням)" x2="кінцева точка x вектора градієнта. (100% за умовчанням)" y2="кінцева точка y вектора градієнта. (0% за умовчанням)" spreadMethod="'pad' або 'reflect' або 'repeat'" xlink:href="посилання на інший градієнт, значення атрибутів якого використовуються як стандартні та включені зупинки. Рекурсивний" |
| <marker> | Маркери можна розміщувати на вершинах ліній, поліліній, багатокутників і контурів. Ці елементи можуть використовувати атрибути маркера "marker-start", "marker-mid" і "marker-end"' які успадковуються за замовчуванням або можуть бути встановлені як 'none' або URI визначеного маркера. Ви повинні спочатку визначити маркер, перш ніж ви зможете посилатися на нього через його URI. Всередині маркера можна помістити будь-яку форму. Вони намальовані поверх елемента, до якого прикріплені | markerUnits="'strokeWidth' або 'userSpaceOnUse'. Якщо використовується 'strokeWidth', то одна одиниця дорівнює одній ширині штриха. В іншому випадку маркер не масштабується та використовує ті самі одиниці перегляду, що й елемент посилання (за замовчуванням 'strokeWidth')" refx="положення, де маркер з’єднується з вершиною (за замовчуванням 0)" refy="положення, де маркер з’єднується з вершиною (за замовчуванням 0)" orient="'auto' або кут, під яким завжди показуватиметься маркер. 'auto' обчислить кут, який робить вісь x дотичною до вершини (за замовчуванням 0)" markerWidth="ширина маркера (за замовчуванням 3)" markerHeight="висота маркера (за замовчуванням 3)" viewBox="пункти "видимі" у цій області малювання SVG. 4 значення, розділені пробілом або комами. (min x, min y, width, height)" + атрибути презентації: Все |
| <mask> | Маскування (Masking) — це комбінація значень непрозорості та відсікання. Подібно до відсікання, ви можете використовувати форми, текст або контури для визначення частин маски. За замовчуванням стан маски є повністю прозорим, що є протилежністю площині відсікання. Графіка в масці визначає, наскільки непрозорими є частини маски | maskUnits="'userSpaceOnUse' або 'objectBoundingBox'. Встановіть, чи буде площина відсікання відносно порту повного огляду або об’єкта (за замовчуванням: 'objectBoundingBox')" maskContentUnits="Використовуйте другу з відсотками, щоб зробити положення графіки маски відносно об’єкта. 'userSpaceOnUse' або 'objectBoundingBox' (за замовчуванням: 'userSpaceOnUse')" x="площина відсікання маски (за замовчуванням: -10%)" y="площина відсікання маски (за замовчуванням: -10%)" width="площина відсікання маски (за замовчуванням: 120%)" height="площина відсікання маски (за замовчуванням: 120%)" |
| metadata | Визначає метадані | |
| missing-glyph | ||
| mpath | ||
| <path> | Визначає шлях | d="набір команд, які визначають шлях" pathLength="Якщо є, шлях буде масштабовано таким чином, щоб обчислена довжина шляху точок дорівнювала цьому значенню" transform="список перетворень" + атрибути презентації: Color, FillStroke, Graphics, Markers |
| <pattern> | Визначає координати, які ви бажаєте відобразити в поданні, і розмір подання. Потім ви додаєте фігури до візерунка. Шаблон повторюється, коли торкається краю вікна перегляду (області перегляду). | id="унікальний ідентифікатор, який використовується для посилання на цей шаблон." Обов’язково. patternUnits="'userSpaceOnUse' або 'objectBoundingBox'. Друге значення робить одиниці x, y, ширину, висоту часткою (або %) обмежувальної рамки об’єкта, яка використовує шаблон." patternContentUnits="'userSpaceOnUse' або 'objectBoundingBox'" patternTransform="дозволяє трансформувати весь візерунок" x="зміщення візерунка від верхнього лівого кута (за замовчуванням 0)" y="зміщення візерунка від верхнього лівого кута. (за замовчуванням 0)" width="ширина плитки візерунка (за замовчуванням 100%)" height="висота плитки візерунка (за замовчуванням 100%)" viewBox="пункти "видимі" у цій області малювання SVG. 4 значення, розділені пробілом або комами (min x, min y, width, height)" xlink:href="посилання на інший шаблон, значення атрибутів якого використовуються як типові, а будь-які дочірні елементи успадковуються. Рекурсивний" |
| <polygon> | Визначає графіку, яка містить принаймні три сторони | points="точки многокутника. Загальна кількість балів має бути парною". Обов’язково. fill-rule="частина FillStroke атрибути презентації" + атрибути презентації: Color, FillStroke, Graphics, Markers |
| <polyline> | Визначає будь-яку форму, яка складається лише з прямих ліній | points="точки на ламаній лінії". Обов’язково. + атрибути презентації: Color, FillStroke, Graphics, Markers |
| <radialGradient> | Визначає радіальний градієнт. Радіальні градієнти створюються шляхом взяття кола та плавної зміни значень між зупинками градієнта від точки фокусування до зовнішнього радіуса. | gradientUnits="'userSpaceOnUse' або 'objectBoundingBox'. Використовуйте поле перегляду або об’єкт, щоб визначити взаємне розташування векторних точок. (За замовчуванням 'objectBoundingBox')" gradientTransform="трансформація для застосування до градієнта" cx="центральна точка градієнта (число або % - 50% за замовчуванням)" cy="центральна точка градієнта. (50% за замовчуванням)" r="радіус градієнта. (50% за умовчанням)" fx="точка фокусування градієнта. (0% за умовчанням)" fy="Точка фокусування градієнта. (0% за умовчанням)" spreadMethod="'pad' або 'reflect' або 'repeat'" xlink:href="Посилання на інший градієнт, значення атрибутів якого використовуються як стандартні та включені зупинки. Рекурсивний" |
| <rect> | Визначає прямокутник | x="верхній лівий кут прямокутника по осі Х" y="верхній лівий кут прямокутника по осі Y" rx="радіус осі x (для округлення елемента)" ry="радіус осі y (для округлення елемента)" width="ширина прямокутника". Обов’язково. height="висота прямокутника" Обов’язково. + атрибути презентації: Color, FillStroke, Graphics |
| script | Контейнер для скриптів (e.g., ECMAScript) | |
| set | Встановлює значення атрибута на визначений термін | |
| <stop> | Упори для градієнта | offset="зсув для цієї зупинки (від 0 до 1/0% до 100%)". Обов’язково. stop-color="колір цієї зупинки" stop-opacity="непрозорість цієї зупинки (від 0 до 1)" |
| style | Дозволяє вставляти таблиці стилів безпосередньо у вміст SVG | |
| <svg> | Створює фрагмент документа SVG | x="верхній лівий кут, коли вбудовано (за замовчуванням 0)" y="верхній лівий кут, коли вбудовано (за замовчуванням 0)" width="ширина фрагмента svg (за замовчуванням 100%)" height="висота фрагмента svg (за замовчуванням 100%)" viewBox="пункти "видимі" у цій області малювання SVG. 4 значення, розділені пробілом або комами. (min x, min y, width, height)" preserveAspectRatio="'none' або будь-яка з 9 комбінацій 'VALYVAL', де VAL є 'min', 'mid' або 'max'. (за замовчуванням xMidYMid)" zoomAndPan="'magnify' або 'disable'. Опція збільшення дозволяє користувачам панорамувати та масштабувати ваш файл (збільшення/magnify за замовчуванням)" xml="крайньому <svg> елементу потрібно налаштувати SVG і його простір імен: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + атрибути презентації: Все |
| switch | ||
| symbol | ||
| <text> | Визначає текст | x="список положень осі х. Положення n-ї осі x надається n-му символу в тексті. Якщо після закінчення позицій є додаткові символи, вони розміщуються після останнього символу. 0 за умовчанням" y="список положень осі Y. (див. x). 0 за умовчанням" dx="список довжин, який переміщує символи відносно абсолютної позиції останнього намальованого гліфа. (див. x)" dy="список довжин, який переміщує символи відносно абсолютної позиції останнього намальованого гліфа. (див. x)" rotate="список обертань. Для n-го символу виконується n-е обертання. Додатковим символам НЕ надається останнє значення обертання" textLength="цільова довжина тексту, між якими програма перегляду SVG намагатиметься відобразити текст, регулюючи інтервали та/або гліфи. (за замовчуванням: нормальна довжина тексту)" lengthAdjust="повідомляє глядачеві, що потрібно налаштувати, щоб спробувати відтворити текст, якщо вказана довжина. Ці два значення є 'spacing' та 'spacingAndGlyphs'" + атрибути презентації: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | Лише текстовий опис елементів у SVG – не відображається як частина графіки. Агенти користувача можуть відображати текст як виринаючу підказку | |
| <tref> | Посилайтесь на будь-який <text> у документі SVG і повторно використовуйте його | Ідентично <text> елемент |
| <tspan> | Ідентичний елементу <text>, але може бути вкладений у текстові теги та всередину самого себе | Ідентичний елементу <text> + додатково: xlink:href="Посилання на елемент <text>" |
| <use> | Використовуйте URI для посилання на <g>, <svg> або інші графічні елементи з унікальним атрибутом id і відтворіть його. Копія є лише посиланням на оригінал, тому в документі існує лише оригінал. Будь-яка зміна оригіналу впливає на всі копії. | x="верхній лівий кут осі Х клонованого елемента" y="верхній лівий кут осі Y клонованого елемента" width="ширина клонованого елемента" height="висота клонованого елемента" xlink:href="посилання URI на клонований елемент" + атрибути презентації: Все |
| view | ||
| vkern |
