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>資料型別