This page was translated from English by the community. Learn more and join the MDN Web Docs community.
<linearGradient>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
<linearGradient> позволяет определять линейные градиенты для заполнения или изменения графических элементов.
Примечание:
Не путайте с CSS linear-gradient(), 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 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%; Анимируемый: да
Примечания по использованию
| Категории | Элемент градиента |
|---|---|
| Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы описания <animate>, <animateTransform>, <discard>, <script>, <set>, <stop>, <style> |
Спецификации
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # LinearGradientElement |
Совместимость с браузерами
Loading...