html - 使用线性渐变再现与 CSS 渐变等效的 SVG 渐变

Question

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

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

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

我们用下面的代码修改了不同的百分比(例如 50/50、25/75)，但这些实验都没有产生相同的梯度。最接近的是 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:

1. 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%.

2. 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.

3. 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>