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。

<percentage>

与 <number>（如上所述）相同，但允许的范围是 0% 到 100%，并且剪裁是针对该范围进行的。

正式定义

数据库中未找到该值！

正式语法

stroke-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

示例

各种描边透明度

此示例演示了 stroke-opacity 属性的基本用法，以及当形状的描边部分覆盖其填充时，透明度小于 1 的描边如何在它们重叠的地方与填充混合。

HTML

首先，我们设置了五个多段路径，所有路径都使用黑色描边（宽度为 1）和用于子路径的 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 填充和描边模块第 3 级
# stroke-opacity

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅