Градиент svg: Градиенты — SVG | MDN

Leave a Comment / Разное / By /

— SVG | MDN

<linearGradient> позволяет определять линейные градиенты для заполнения или изменения графических элементов.

Примечание: Не путайте с CSS linear-gradient() (en-US), CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.

html,body,svg { height:100% }

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
gradientUnits (en-US)

Определяет систему координат для атрибутов

x1, x2, y1, y2 Тип значения: userSpaceOnUse|objectBoundingBox ; Значение по умолчанию: objectBoundingBox; Анимируемый: да

gradientTransform (en-US)

Этот атрибут обеспечивает дополнительное преобразование для системы координат градиента. Тип значения: <transform-list> (en-US) ; Значение по умолчанию: identity transform; Анимируемый: да

href (en-US)

Этот атрибут определяет ссылку на другой элемент <linearGradient>, который будет использоваться в качестве шаблона. Тип значения: <URL>

(en-US) ; Значение по умолчанию: none; Анимируемый: да

spreadMethod (en-US)

Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент. Тип значения: pad|reflect|repeat ; Значение по умолчанию: pad; Анимируемый: да

x1 (en-US)

Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> (en-US) ; Значение по умолчанию

: 0%; Анимируемый: да

x2 (en-US)

Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> (en-US) ; Значение по умолчанию: 100%; Анимируемый: да

xlink:href (en-US)

Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

<IRI> (en-US) ссылка на другой <linearGradient> элемент, который будет использоваться в качестве шаблона.
Тип значения: <IRI> (en-US) ; Значение по умолчанию: none; Анимируемый: да
y1 (en-US)

Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> (en-US) ; Значение по умолчанию: 0%; Анимируемый: да

y2 (en-US)

Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> (en-US)

; Значение по умолчанию: 0%; Анимируемый: да

Глобальные атрибуты

Основные атрибуты

Прежде всего: id

Атрибуты стилизации (en-US)
class, style (en-US)
Атрибуты событий

Глобальные атрибуты событий (en-US), Атрибуты событий элементов документа (en-US)

Атрибуты презентации (en-US)

Прежде всего: clip-path (en-US), clip-rule (en-US), color (en-US), color-interpolation (en-US), color-rendering, cursor (en-US), display (en-US)

, fill, fill-opacity, fill-rule, filter (en-US), mask (en-US), opacity (en-US), pointer-events (en-US), shape-rendering, stroke, stroke-dasharray (en-US), stroke-dashoffset, stroke-linecap, stroke-linejoin (en-US), stroke-miterlimit (en-US), stroke-opacity (en-US), stroke-width, transform, vector-effect (en-US), visibility (en-US)

XLink атрибуты
xlink:href (en-US), xlink:title (en-US)
Категории		Градиент
Разрешённый контентЛюбое количество следующих элементов, в любом порядке:
Элементы описания
<animate>, <animateTransform> (en-US), <set> (en-US), <stop> (en-US)
Specification
Scalable Vector Graphics (SVG) 2
# LinearGradients

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Last modified: , by MDN contributors

Как создать линейный градиент в SVG