使用 linear-gradient 重现等同于 CSS 渐变的 SVG 渐变

Question

您可以在现代网站中创建 CSS 渐变，方法很简单：

background-image: linear-gradient(red, orange);

目标是在 SVG 中重新创建此渐变，那么每个 CSS 停靠点默认使用多少百分比？

我们用下面的代码修改了不同的百分比（例如，50/50、25/75），但是 none 这些实验产生了相同的梯度。最接近的是 10/90，但如果您省略它们，有人可以确认使用的默认百分比吗？

div {
  height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      red 50%, 
      orange 50%
    );
}

Answer 1

当您有 2 种颜色时，百分比为 0% 和 100%

.box {
  height:200px;
  background:
    linear-gradient(to right,red,blue) top/100% 40%,
    linear-gradient(to right,red 0%,blue 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>

如果我们检查 the specification 我们可以看到读取：

The colors in gradients are specified using color stops. A color stop is a combination of a color and a position. While every color stop conceptually has a position, the position can be omitted in the syntax, in which case it gets automatically filled in by the user agent; see below for details.

然后

When the position of a color stop is omitted, it is positioned automatically halfway between the two surrounding stops. If multiple stops in a row lack a position, they space themselves out equally.

以及全套规则：

The following steps must be applied in order to process the list of color stops. After applying these rules, all color stops will have a definite position and color and they will be in ascending order:

If the first color stop does not have a position, set its position to 0%. If the last color stop does not have a position, set its position to 100%.

If a color stop has a position that is less than the specified position of any color stop before it in the list, set its position to be equal to the largest specified position of any color stop before it.

If any color stop still does not have a position, then, for each run of adjacent color stops without positions, set their positions so that they are evenly spaced between the preceding and following color stops with positions.

第一条规则很简单。第二条规则意味着我们应该在逻辑上有一个增量。因此，如果我们有类似 linear-gradient(red 20%, blue 10%, yellow 5%) 的内容，它将转换为 linear-gradient(red 20%, blue 20%, yellow 20%)。第三条规则将简单地将非定位颜色放置在两个定位颜色之间等距。

所以如果我们有多种没有位置的颜色，它将是这样的：

.box {
  height:100px;
  background:
    linear-gradient(to right,red,yellow,blue) top/100% 40%,
    linear-gradient(to right,red 0%,yellow 50%,blue 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}
.box1 {
  height:100px;
  background:
    linear-gradient(to right,red,yellow,purple,blue) top/100% 40%,
    linear-gradient(to right,red 0%,yellow 33.333%,purple 66.66%,blue 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>

<div class="box1">

</div>

如果我们有一些定义的位置，我们将有这个：

.box {
  height:100px;
  background:
    linear-gradient(to right,red,yellow,blue 80%) top/100% 40%,
    linear-gradient(to right,red 0%,yellow 40%,blue 80%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}
.box1 {
  height:100px;
  background:
    linear-gradient(to right,red,yellow 20%,purple,blue 80%) top/100% 40%,
    linear-gradient(to right,red 0%,yellow 20%,purple 50%,blue 80%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>

<div class="box1">

</div>

更复杂的案例：

.box {
  height:100px;
  background:
    linear-gradient(to right,red 20%,yellow 5%,red,orange,blue 80%,pink) top/100% 40%,
    linear-gradient(to right,red 20%,yellow 20%,red 40%,orange 60%,blue 80%,pink 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>

Answer 2

根据您的 post，要在 SVG 中重现渐变，请在 svg <defs/> 元素中定义线性渐变。

请参阅下面的代码片段（css 仅适用于 html div）。

div {
  height: 100px;
  width: 100px;
  display: inline-block;
  background-color: red;
  background-image: linear-gradient(red, orange);
}

<div></div>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
  <defs> 
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%" > 
      <stop offset="0%" style="stop-color:red;stop-opacity:1" />
      <stop offset="100%" style="stop-color:orange;stop-opacity:1" />
    </linearGradient> 
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)"/>
</svg>

使用 linear-gradient 重现等同于 CSS 渐变的 SVG 渐变

Reproducing SVG gradient equivalent to CSS gradient with linear-gradient

html

css

svg

linear-gradients