SVG线性渐变用法示例

SVG线性渐变用于表示一种颜色到另一种颜色的线性过渡。
【SVG线性渐变用法示例】< linearGradient> 元素定义线性渐变。我们可以在< defs> 元素中使用< linearGradient> 元素。
线性渐变可以是垂直, 水平或角度渐变：

当x1和x2不同且y1和y2相等时, 将创建水平渐变。
当y1和y2不同且x1和x2相等时, 将创建垂直渐变。
当y1, y2和x1, x2都不同时, 将创建角度渐变。

例子

< !DOCTYPE html> < html> < body> < svg height="500" width="500"> < defs> < linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> < stop offset="0%" style="stop-color:rgb(255, 255, 0); stop-opacity:1" /> < stop offset="50%" style="stop-color:rgb(255, 0, 0); stop-opacity:1" /> < /linearGradient> < /defs> < ellipse cx="250" cy="100" rx="120" ry="70" fill="url(#grad1)" /> < /svg> < /body> < /html>

立即测试
解释