stroke-opacity
stroke-opacity CSS 屬性定義了 SVG 形狀描邊的不透明度。其效果與 opacity 相同，但僅應用於描邊，不應用於整個元素。如果存在，它會覆蓋元素的 stroke-opacity 屬性。
此屬性適用於 SVG 形狀和文字內容元素（完整列表請參閱 stroke-opacity），但作為繼承屬性，它也可以應用於 <g> 等元素，並仍對子元素的描邊產生預期效果。
請注意，形狀的描邊會部分覆蓋該形狀的填充，因此不透明度小於 1 的描邊將會在重疊處顯示填充與描邊混合的效果。為避免此效果，可以使用 opacity 屬性應用全域性不透明度，或使用 paint-order 屬性將描邊置於填充之後。
語法
css
/* numeric and percentage values */
stroke-opacity: 1;
stroke-opacity: 0.3;
stroke-opacity: 50%;
/* Global values */
stroke-opacity: inherit;
stroke-opacity: initial;
stroke-opacity: revert;
stroke-opacity: revert-layer;
stroke-opacity: unset;
值
<number>-
任何介於 0 到 1 之間（包括 0 和 1）的實數。值為
0使描邊完全透明，值為1使其完全不透明。超出 0 – 1 範圍的值將被裁剪到該範圍的最近端；因此，負值將被裁剪為0。 <percentage>-
與
<number>相同（見上文），但允許範圍為 0% 到 100%，並且裁剪是根據該範圍進行的。
正式定義
正式語法
stroke-opacity =
<'opacity'>
<opacity> =
<opacity-value>
<opacity-value> =
<number> |
<percentage>
示例
各種描邊不透明度
本示例演示了 stroke-opacity 屬性的基本用法，以及形狀的描邊如何部分覆蓋其填充，不透明度小於 1 的描邊如何在重疊處與填充混合。
HTML
首先，我們設定了五個多段路徑，所有路徑都使用寬度為一的黑色描邊，以及子路徑的 dodgerblue 填充。每個路徑建立一系列山峰符號，從左（淺角）到右（極角）。
html
<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="dodgerblue">
<path
d="M1,5 l7 ,-3 l7 ,3
m2,0 l3.5 ,-3 l3.5 ,3
m2,0 l2 ,-3 l2 ,3
m2,0 l0.75,-3 l0.75,3
m2,0 l0.5 ,-3 l0.5 ,3" />
<path
d="M1,12 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,33 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</g>
</svg>
CSS
我們對這些路徑應用了逐漸增高的描邊不透明度值。對於前四個路徑，可以透過描邊路徑的內部一半看到填充，儘管對於第四個路徑可能難以辨別。對於第五個也是最後一個路徑，描邊完全不透明，因此無法透過描邊看到填充。
css
g path:nth-child(1) {
stroke-opacity: 0.2;
} /* equiv. 20% */
g path:nth-child(2) {
stroke-opacity: 0.4;
} /* equiv. 40% */
g path:nth-child(3) {
stroke-opacity: 0.6;
} /* equiv. 60% */
g path:nth-child(4) {
stroke-opacity: 0.8;
} /* equiv. 80% */
g path:nth-child(5) {
stroke-opacity: 1;
} /* equiv. 100% */
結果
規範
| 規範 |
|---|
| CSS 填充與描邊模組 Level 3 # stroke-opacity |
瀏覽器相容性
載入中…