linearGradient
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
linearGradient
元素用来定义线性渐变,用于图形元素的填充或描边。
使用上下文
类别 | 渐变元素 |
---|---|
允许的内容 | 任意数量、任意顺序的下列元素: 描述性元素 <animate> 、<animateTransform> 、<set> 、<stop> |
示例
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>
属性
Global 属性
专有属性
DOM 接口
该元素实现了 SVGLinearGradientElement
接口。
浏览器兼容性
BCD tables only load in the browser