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 |
浏览器兼容性
加载中…