SVG使用linearGradient元素定义渐变色时，<id>和<stop>元素的功能分别是什么？

Question

SVG使用linearGradient元素定义渐变色时，<id>和<stop>元素的功能分别是什么？其中的offset属性和stop-color属性用于实现什么功能？

Answer 1

线性渐变就是一系列颜色沿着一条直线过渡，SVG也使用linearGradient元素定义线性渐变，并可以定义水平、垂直或角形的渐变。渐变的颜色可以由两种或多种颜色组成，每种颜色通过一个<stop>标记来定义。

使用linearGradient元素定义渐变的语法格式如下。linearGradient元素的属性中，id属性为渐变色指定唯一的名称，以便引用该渐变色。

<linearGradient id="id1" x1="" y1="" x2="" y2="">

         <!--用stop元素添加颜色信息-->

 </linearGradient>

渐变色的成员色使用stop元素定义，语法格式如下。

<stop offset="offsetValue" stop-color="" stop-opacity=""/>

stop元素的offset属性用于定义该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色设置成0%，最后一种设置成100%。

stop-color属性：定义该成员色的颜色。

stop-opacity属性：定义成员色的透明度，取值范围在0到1之间。

stop元素的属性也可以使用CSS定义，它支持class、id等标准HTML的属性。