使用线性渐变再现与CSS渐变等效的SVG渐变 [英] Reproducing SVG gradient equivalent to CSS gradient with linear-gradient
问题描述
您可以在现代站点中创建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%
);
}
当您有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>
如果我们检查规范，可以看到:
使用色标指定渐变中的颜色.色标是颜色和位置的组合.虽然每个色标在概念上都有位置，但是可以在语法中省略该位置，在这种情况下，它会由用户代理自动填充；有关详情，请参见下文.
然后
当省略色标的位置时，它会自动定位在两个周围色标之间的中间位置.如果连续的多个停靠站缺少位置，则它们之间的间距相等.
以及全套规则:
必须使用以下步骤来处理色标列表.应用这些规则后，所有色标将具有确定的位置和颜色，并且它们将按升序排列:
如果第一个色标没有位置，请将其位置设置为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>
You can create CSS gradients in modern sites with something as simple as:
background-image: linear-gradient(red, orange);
The goal is to recreate this gradient in SVG, so what percentages are being used by default for each CSS stop?
We tinkered with different percentages (e.g., 50/50, 25/75) with the code below, but none of these experiments produced the same gradient. The closest was 10/90, but could someone confirm the default percentages used if you omit them?
div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
red 50%,
orange 50%
);
}
When you have 2 colors the percentages are 0% and 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>
If we check the specification we can see read:
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.
And then
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.
And the full set of rules:
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.
The first rule is trivial. The second rules means that we should logically have an incrementation. So if we have something like linear-gradient(red 20%, blue 10%, yellow 5%) it will get transformed to linear-gradient(red 20%, blue 20%, yellow 20%). The third rule will simply position non positionned color to be spaced equally between two positionned colors.
So if we have multiple colors without position it will be something like this:
.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>
And in case we have some defined positions we will have this:
.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>
More complex cases:
.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>
这篇关于使用线性渐变再现与CSS渐变等效的SVG渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
