SVG stop-color属性用法及代码示例

stop-color属性用于指示要在渐变停止点使用的颜色。它仅对<stop>元素起作用。此属性的默认值为“black”。

用法:

stop-color = currentcolor | color | icccolor

属性值：该属性接受如上所述和以下所述的值：

currentcolor:它表示当前的填充颜色。
color:它指示颜色值。
icccolor:它指示ICC颜色配置文件。

以下示例说明了stop-color属性的用法。

范例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 50 10" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"> 
          
        <defs> 
            <linearGradient id="geek"> 
                <stop offset="25%" 
                    stop-color="lightgreen" /> 
  
                <stop offset="75%" 
                    stop-color="green" /> 
            </linearGradient> 
        </defs> 
          
        <circle cx="5" cy="5" r="5" 
            fill="url('#geek')" /> 
    </svg> 
</body> 
  
</html>

输出：

范例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg height="200" width="200"> 
        <defs> 
            <linearGradient id="gradient"> 
                <stop offset="20%" 
                    stop-color="rgb(20, 200, 0)" 
                    stop-opacity="0.4" /> 
  
                <stop offset="80%" 
                    stop-color="rgb(200, 200, 0)" 
                    stop-opacity="0.4" /> 
            </linearGradient> 
        </defs> 
  
        <rect width="100%" height="100%" 
            fill="url(#gradient)" 
            style="stroke:green;" /> 
  
        <rect x="30" y="30" width="70%" 
            height="70%" fill="url(#gradient)" /> 
  
        <text fill="Green" y="100" font-size="25"> 
            GeeksForGeeks 
        </text> 
    </svg> 
</body> 
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG stop-color Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。