<linearGradient>
<linearGradient>
позволяет определять линейные градиенты для заполнения или изменения графических элементов.
Примечание: Не путайте с CSS linear-gradient()
, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.
Пример
<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
-
Определяет систему координат для атрибутов
x1
,x2
,y1
,y2
Тип значения:userSpaceOnUse
|objectBoundingBox
; Значение по умолчанию:objectBoundingBox
; Анимируемый: да gradientTransform
-
Этот атрибут обеспечивает дополнительное преобразование для системы координат градиента. Тип значения: <transform-list> ; Значение по умолчанию: identity transform; Анимируемый: да
href
-
Этот атрибут определяет ссылку на другой элемент
<linearGradient>
, который будет использоваться в качестве шаблона. Тип значения: <URL> ; Значение по умолчанию: none; Анимируемый: да spreadMethod
-
Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент. Тип значения:
pad
|reflect
|repeat
; Значение по умолчанию:pad
; Анимируемый: да x1
-
Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> ; Значение по умолчанию:
0%
; Анимируемый: да x2
-
Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> ; Значение по умолчанию:
100%
; Анимируемый: да xlink:href
-
<IRI> ссылка на другой
Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.
<linearGradient>
элемент, который будет использоваться в качестве шаблона. Тип значения: <IRI> ; Значение по умолчанию: none; Анимируемый: да y1
-
Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> ; Значение по умолчанию:
0%
; Анимируемый: да y2
-
Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> ; Значение по умолчанию:
0%
; Анимируемый: да
Глобальные атрибуты
- Основные атрибуты
-
Прежде всего:
id
- Атрибуты стилизации
class
,style
- Атрибуты событий
-
Глобальные атрибуты событий, Атрибуты событий элементов документа
- Атрибуты презентации
-
Прежде всего:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- XLink атрибуты
xlink:href
,xlink:title
Примечания по использованию
Категории | Элемент градиента |
---|---|
Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы описания <animate> , <animateTransform> , <set> , <stop> |
Спецификации
Specification |
---|
Scalable Vector Graphics (SVG) 2 # LinearGradients |
Совместимость с браузерами
BCD tables only load in the browser