stop-color

**stop-color** CSS 属性定义用于 SVG <stop> 元素（在渐变中）的颜色。如果存在，它将覆盖元素的 stop-color 属性。

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

语法

css
/* <color> values */
stop-color: red;
stop-color: hsl(120deg 75% 25% / 60%);
stop-color: currentcolor;

/* Global values */
stop-color: inherit;
stop-color: initial;
stop-color: revert;
stop-color: revert-layer;
stop-color: unset;

值

<color>

填充的颜色。这可以是任何有效的 CSS <color> 值。

正式定义

数据库中未找到该值！

正式语法

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

示例

定义 SVG 渐变的颜色停止点

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

HTML

我们有一个 SVG，其中包含三个 <rect> 正方形和三个 <linearGradient> 元素。每个渐变都有四个 <stop> 元素，创建从黑色到白色，然后从白色到灰色的渐变；它们之间唯一的区别是 id 值。

html
<svg viewBox="0 0 264 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient1">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
    <linearGradient id="myGradient2">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
    <linearGradient id="myGradient3">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
  </defs>
  <rect x="2" y="10" width="80" height="80" fill="url('#myGradient1')" />
  <rect x="92" y="10" width="80" height="80" fill="url('#myGradient2')" />
  <rect x="182" y="10" width="80" height="80" fill="url('#myGradient3')" />
</svg>

CSS

我们包括一个 stroke 和 stroke-width 来描绘矩形轮廓。我们使用 stop-color 属性定义每个渐变中第一个和最后一个停止点的颜色，覆盖其 stop-color 属性值。显示了各种 CSS <color> 语法。

css
rect {
  stroke: #333;
  stroke-width: 1px;
}

#myGradient1 {
  stop:first-of-type {
    stop-color: #66ccff;
  }
  stop:last-of-type {
    stop-color: #f4aab9;
  }
}
#myGradient2 {
  stop:first-of-type {
    stop-color: yellow;
  }
  stop:last-of-type {
    stop-color: purple;
  }
}
#myGradient3 {
  stop:first-of-type {
    stop-color: hsl(0deg 100% 50%);
  }
  stop:last-of-type {
    stop-color: hsl(20deg 100% 50%);
  }
}

结果

规范

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

浏览器兼容性

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

另请参阅