SVG线性渐变第一个<stop>元素前的颜色取值问题

示例代码 #

<linearGradient x1="0" y1="0" x2="800" y2="800" gradientUnits="userSpaceOnUse">
   <stop offset="0.2" stop-color="blue"/>
   <stop offset="1.0" stop-color="red"/>
</linearGradient>

疑问点 #

这段线性渐变沿向量(0,0)-->(800,800)方向，存在两个疑问：

• 第一个<stop offset="0.2" ...>对应的前0.2段距离内，颜色会如何变化？
• 第一个<stop>声明的颜色是否会在该元素对应的偏移量之前的区间生效？

解答 #

• 前0.2段距离（从渐变起点(0,0)到向量0.2倍位置(160,160)）的颜色是纯蓝色，没有任何渐变过渡。
• 第一个<stop>的蓝色会直接覆盖offset=0到offset=0.2的整个区间；只有在offset=0.2到offset=1.0的区间（对应向量从(160,160)到(800,800)），才会从蓝色平滑过渡到红色。

SVG渐变的默认规则是：如果第一个<stop>的offset大于0，那么0到该offset的区域会直接使用第一个<stop>的颜色；同理，若最后一个<stop>的offset小于1，该offset到1的区域会使用最后一个<stop>的颜色。

内容的提问来源于stack exchange，提问作者jsbox