<linearGradient>
Элемент <linearGradient> позволяет авторам определять линейные градиенты для применения к другим элементам 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> ; Значение по умолчанию: преобразование по умолчанию; Анимируемый: да
href-
Этот атрибут определяет ссылку на другой элемент
<linearGradient>, который будет использован в качестве шаблона. Тип значения: <URL> ; Значение по умолчанию: нет; Анимируемый: да spreadMethod-
Этот атрибут указывает, как градиент ведет себя, если он начинается или заканчивается внутри границ фигуры, содержащей градиент. Тип значения:
pad|reflect|repeat; Значение по умолчанию:pad; Анимируемый: да x1-
Этот атрибут определяет координату x точки начала векторного градиента, по которому рисуется линейный градиент. Тип значения:
<length-percentage>|<number>; Значение по умолчанию:0%; Анимируемый: да x2-
Этот атрибут определяет координату x конечной точки векторного градиента, по которому рисуется линейный градиент. Тип значения:
<length-percentage>|<number>; Значение по умолчанию:100%; Анимируемый: да -
xlink:hrefУстаревший -
Ссылка <IRI> на другой элемент
<linearGradient>, который будет использован в качестве шаблона. Тип значения: <IRI> ; Значение по умолчанию: нет; Анимируемый: да y1-
Этот атрибут определяет координату y точки начала векторного градиента, по которому рисуется линейный градиент. Тип значения:
<length-percentage>|<number>; Значение по умолчанию:0%; Анимируемый: да y2-
Этот атрибут определяет координату y конечной точки векторного градиента, по которому рисуется линейный градиент. Тип значения:
<length-percentage>|<number>; Значение по умолчанию:0%; Анимируемый: да
Контекст использования
| Категории | Элемент градиента |
|---|---|
| Разрешенное содержимое | Любое количество следующих элементов в любом порядке: Дескриптивные элементы <animate>, <animateTransform>, <set>, <stop>
|
Спецификации
| Спецификация |
|---|
| Scalable Vector Graphics (SVG) 2 # LinearGradients |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
linearGradient |
1 | 12 | 1.5 | 9 | 3 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
gradientTransform |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
gradientUnits |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
href |
50 | 12 | 51 | 37 | 12.1 | 50 | 51 | 37 | 12.2 | 5.0 | 50 |
spreadMethod |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
x1 |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
x2 |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
xlink_href |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
y1 |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
y2 |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
