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，我们会看到以下内容：

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

然后

当省略色标的位置时，它会自动定位在两个周围色标之间的中间位置。如果连续的多个停靠站缺少位置，则它们之间的间距相等。

以及全套规则：

必须执行以下步骤才能处理色标列表。应用这些规则后，所有色标都将具有确定的位置和颜色，并且它们将按升序排列：



如果第一个色标没有位置，请将其位置设置为0％。如果最后一个色标没有位置，请将其位置设置为100％。



如果一个色标的位置小于列表中任何一个色标的指定位置，请将其位置设置为等于该色标之前的最大色标位置。
p>

如果任何一个色标仍然没有位置，那么对于没有位置的相邻色标的每次运行，请设置其位置，以使其在前后两个有位置的色标之间均匀间隔。 p>

第一个规则很简单。第二条规则意味着我们在逻辑上应该有一个增量。因此，如果我们有类似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>

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

2 个答案: