stop-opacity

在 SVG 渐变的 <stop> 元素中，使用 stop-opacity CSS 属性定义给定颜色渐变停止点的透明度。如果存在，则会覆盖元素的 stop-opacity 属性。

属性值会影响 stop-color 的 alpha 通道；它可以增加 <stop> 颜色透明度，但不能使 stop-color 属性定义的颜色更加不透明。

注意：stop-opacity 属性仅适用于嵌套在 <svg> 中的 <stop> 元素。它不适用于其他 SVG、HTML 或伪元素。

语法

css
/* 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（包含）之间的数值。

<percentage>

一个介于 0% 和 100%（包含）之间的百分比值。

如果设置为 0 或 0%，则停止点完全透明。如果设置为 1 或 100%，则元素具有 stop-color 值的完全透明度，这可能是部分透明，也可能不是。

正式定义

在数据库中未找到值！

正式语法

错误：无法找到此项目的语法

示例

定义 SVG 渐变颜色停止点的透明度

此示例演示了 stop-opacity 的基本用例，以及 CSS stop-opacity 属性如何优先于 stop-opacity 属性。

HTML

我们有一个 SVG，其中包含一些 <polygon> 星形和三个 <linearGradient> 元素：每个元素都有三个 <stop> 元素，定义了三个颜色停止点，从而创建一个从蓝色到白色到粉红色的渐变；它们之间的唯一区别是 id 值。

html
<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 具有条纹背景，使透明度设置更加明显。

css
polygon {
  stroke: #333;
  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 属性设置一个值。

规范

规范
可缩放矢量图形 (SVG) 2
# StopOpacityProperty

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅