<linearGradient>
<linearGradient>
позволяет определять линейные градиенты для заполнения или изменения графических элементов.
Примечание: Не путайте с CSS linear-gradient()
(en-US), CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.
Пример
html
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myGradient" 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