用线性梯度再现等效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

当你有两种颜色时，百分比是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>

​

如果我们检查规格，我们可以看到：

渐变中的颜色是使用颜色停止指定的。颜色停止是颜色和位置的组合。虽然每个颜色停止在概念上都有一个位置，但可以在语法中省略该位置，在这种情况下，它将由用户代理自动填充；有关详细信息，请参阅下面。

然后

当色站的位置被省略时，它被自动定位在两个周围停止之间的一半。如果多个止损点在一排中缺少一个位置，那么它们的间隔是相等的。

以及一整套规则：

为了处理颜色停止列表，必须应用以下步骤。在应用这些规则之后，所有颜色停止将有一个明确的位置和颜色，它们将按升序排列：

1. 如果第一个颜色停止没有位置，则将其位置设置为0%。如果最后一个颜色停止没有位置，则将其位置设置为100%。
2. 如果颜色停止的位置小于列表中任何颜色停止的指定位置，则将其位置设置为等于其前面任何颜色停止的最大指定位置。
3. 如果任何颜色停止仍然没有位置，那么，对于没有位置的相邻颜色停止的每一次运行，设置它们的位置，使它们在前面和后面的颜色停止与位置之间均匀地间隔。

第一条规则是微不足道的。第二个规则意味着我们在逻辑上应该有一个增量。因此，如果我们有类似于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

根据您的文章，要在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>

​