stop-opacity
stop-opacity CSS 属性定义了 SVG 渐变中 <stop> 元素中给定颜色渐变停止点的不透明度。如果存在，它会覆盖元素的 stop-opacity 属性。
属性值影响 stop-color 的 alpha 通道；它可以增加 <stop> 颜色的透明度，但不能使 stop-color 属性定义的颜色变得更不透明。
语法
/* numeric and percentage values */
stop-opacity: 0.2;
stop-opacity: 20%;
/* Global values */
stop-opacity: inherit;
stop-opacity: initial;
stop-opacity: revert;
stop-opacity: revert-layer;
stop-opacity: unset;
值
<opacity-value> 是一个 <number> 或 <percentage>，表示 SVG 渐变 <stop> 元素的不透明度。
<number>-
介于
0和1之间（包括0和1）的数值。 <percentage>-
介于
0%和100%之间（包括0%和100%）的百分比值。
设置为 0 或 0% 时，停止点完全透明。设置为 1 或 100% 时，元素具有 stop-color 值的完全不透明度，该值可能部分不透明或完全不透明。
正式定义
正式语法
stop-opacity =
<number> |
<percentage>
示例
定义 SVG 渐变颜色停止点的不透明度
此示例演示了 stop-opacity 的基本用例，以及 CSS stop-opacity 属性如何优先于 stop-opacity 属性。
HTML
我们有一个 SVG，其中包含一些 <polygon> 星星和三个 <linearGradient> 元素：每个都包含三个 <stop> 元素，定义了三个颜色停止点，创建了一个从蓝色到白色再到粉色的渐变；它们之间唯一的区别是 id 值。
<svg viewBox="0 0 250 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient1">
<stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
<stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
<stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
</linearGradient>
<linearGradient id="myGradient2">
<stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
<stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
<stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
</linearGradient>
<linearGradient id="myGradient3">
<stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
<stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
<stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
</linearGradient>
</defs>
<polygon points="40,10 10,100 80,40 0,40 70,100" />
<polygon points="125,10 95,100 165,40 85,40 155,100" />
<polygon points="210,10 180,100 250,40 170,40 240,100" />
</svg>
CSS
我们包含了一个 stroke 和 stroke-width，使多边形路径线可见。
每个 polygon 都使用 fill 属性设置了渐变背景；渐变的 id 是 url() 参数。我们将 magenta 设置为备用颜色。
我们使用 stop-opacity 属性定义每个渐变停止点的不透明度。
SVG 具有条纹背景，使透明度设置更加明显。
polygon {
stroke: #333333;
stroke-width: 1px;
}
polygon:nth-of-type(1) {
fill: url("#myGradient1") magenta;
}
polygon:nth-of-type(2) {
fill: url("#myGradient2") magenta;
}
polygon:nth-of-type(3) {
fill: url("#myGradient3") magenta;
}
#myGradient1 stop {
stop-opacity: 1;
}
#myGradient2 stop {
stop-opacity: 0.8;
}
#myGradient3 stop {
stop-opacity: 25%;
}
结果
第一颗星完全不透明。第二颗星的填充为 80% 不透明，因为颜色停止点略微半透明；stop-opacity: 0.8; 覆盖了 stop-opacity="1" 元素属性值。最后一颗星的填充几乎不明显，颜色停止点为 25% 不透明。请注意，描边在所有情况下都是相同的不透明深灰色。
注意： 因为我们在线性渐变中所有同级 <stop> 元素使用了相同的 stop-opacity 值，所以我们也可以使用一个具有完全不透明停止点的 <linearGradient>，并为每个 <polygon> 的 fill-opacity 属性设置一个值。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # StopOpacityProperty |
浏览器兼容性
加载中…
另见
- SVG
stop-opacity属性 - 呈现属性：
stop-opacity,clip-rule,color-interpolation-filters,fill-opacity,fill-rule,fill,marker-end,marker-mid,marker-start,shape-rendering,stop-color,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,text-anchor和vector-effect opacitybackground-color<color><basic-shape>数据类型