此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

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年7月⁩.

* Some parts of this feature may have varying levels of support.

linearGradient元素用来定义线性渐变,用于图形元素的填充或描边。

使用上下文

类别渐变元素
允许的内容任意数量、任意顺序的下列元素:
描述性元素
<animate><animateTransform><discard><script><set><stop><style>

示例

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 接口。

浏览器兼容性

参见