html - 是否可以在类似于 SVG 开始和结束位置的 CSS 背景中设置渐变开始和结束位置？

Question

在 SVG 渐变中，您可以设置开始 x y 和结束 x y 位置。是否可以在 CSS 中做到这一点。

这是原始设计:

这是我的线性渐变 SVG:

.myRectangle {
	width: 331px;
	height: 137px;
	left: 0px;
	top: 0px;
}

<svg class="myRectangle">
  <linearGradient id="LinearGradientFill2" spreadMethod="pad" x1="1" x2="0.5" y1="0" y2="0.5">
    <stop offset="0" stop-color="#f7f7f7" stop-opacity="1" cssvalue=""></stop>
    <stop offset="0.266" stop-color="#ea0000" stop-opacity="1" cssvalue=""></stop>
    <stop offset="0.7685" stop-color="#6c165f" stop-opacity="1" cssvalue=""></stop>
    <stop offset="1" stop-color="#272020" stop-opacity="1" cssvalue=""></stop>
  </linearGradient>
  <rect fill="url(#LinearGradientFill2)" id="myRectangle" rx="0" ry="0" x="0" y="0" width="331" height="137">
  </rect>
</svg>

这是我的 CSS 线性渐变:

#rectangle {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(225deg, rgba(255,255,255,1) 0%, rgba(250,0,0,1) 27.59%, rgba(108,22,95,1) 76.35%, rgba(39,32,32,1) 100%)
}

<div id="rectangle">

</div>

我一直在引用 this page在 MDN 和 this page在 W3C 上。

SVG 包含渐变的方向

x1="1"x2="0.5"y1="0"y2="0.5"

The element also takes several other attributes, which specify the size and appearance of the gradient. The orientation of the gradient is controlled by two points, designated by the attributes x1, x2, y1, and y2. These attributes define a line along which the gradient travels. The gradient defaults to a horizontal orientation, but it can be rotated by changing these. Gradient2 in the above example is designed to create a vertical gradient. - from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

来自其他文档:

X and Y position of the start of the gradient line, as a multiple of the object's bounding box: X=0 indicates the left edge of the bounding box and X=1 indicates the right edge. The gradient line may start or end outside the object's bounding box, so values may be < 0 or > 1.

Answer 1

您可以将所有色标的值除以相同的因子，以减小渐变的大小并使其与 SVG 相似。

我使用 CSS 变量来简化它，但这不是强制性的

.rectangle {
  width: 100%;
  height: 200px;
  --s:2;
  background: 
   linear-gradient(225deg, 
    rgba(255,255,255,1) 0%, 
    rgba(250,0,0,1)   calc(27.59%/var(--s)), 
    rgba(108,22,95,1) calc(76.35%/var(--s)), 
    rgba(39,32,32,1)  calc(100%/var(--s)));
}

<div class="rectangle">

</div>

<div class="rectangle" style="--s:1.5">

</div>

<div class="rectangle" style="--s:3">

</div>

您可以添加一个额外的变量来抵消模拟起点的梯度:

.rectangle {
  width: 100%;
  height: 200px;
  --s:2;
  --p:10%;
  background: 
   linear-gradient(225deg, 
    rgba(255,255,255,1) var(--p), 
    rgba(250,0,0,1)   calc(27.59%/var(--s) + var(--p)), 
    rgba(108,22,95,1) calc(76.35%/var(--s) + var(--p)), 
    rgba(39,32,32,1)  calc(100%/var(--s) + var(--p)));
}

<div class="rectangle">

</div>

<div class="rectangle" style="--s:3;--p:20%">

</div>

<div class="rectangle" style="--s:3">

</div>

---

下面是 SVG 和 CSS 渐变之间的一些比较:

.rectangle {  
  background: 
   linear-gradient(var(--a), 
    #f7f7f7  var(--p), 
    #ea0000  calc(26.6%/var(--s) + var(--p)), 
    #6c165f  calc(76.85%/var(--s) + var(--p)), 
    #272020  calc(100%/var(--s) + var(--p)));
}

.myRectangle,
.rectangle {
  width:100px;
  height:100px;
  display:inline-block;
}

<svg class="myRectangle" viewBox="0 0 100 100">
  <linearGradient id="LinearGradientFill2" spreadMethod="pad" x1="0.7" x2="0.5" y1="0.2" y2="0.5">
    <stop offset="0" stop-color="#f7f7f7"  ></stop>
    <stop offset="0.266" stop-color="#ea0000" ></stop>
    <stop offset="0.7685" stop-color="#6c165f" ></stop>
    <stop offset="1" stop-color="#272020" ></stop>
  </linearGradient>
  <rect fill="url(#LinearGradientFill2)"  rx="0" ry="0" x="0" y="0" width="100" height="100">
  </rect>
</svg>
<div class="rectangle" style="--s: 3.82;--p: 23.87%;--a:213.69deg;">

</div>
<svg class="myRectangle" viewBox="0 0 100 100">
  <linearGradient id="LinearGradientFill3" spreadMethod="pad" x1="0.7" x2="1" y1="0.2" y2="0.8">
    <stop offset="0" stop-color="#f7f7f7"  ></stop>
    <stop offset="0.266" stop-color="#ea0000"  ></stop>
    <stop offset="0.7685" stop-color="#6c165f"  ></stop>
    <stop offset="1" stop-color="#272020"  ></stop>
  </linearGradient>
  <rect fill="url(#LinearGradientFill3)"  rx="0" ry="0" x="0" y="0" width="100" height="100">
  </rect>
</svg>
<div class="rectangle" style="--s: 1.98;--p: 33%;--a: 153.5deg;">

</div>
<svg class="myRectangle" viewBox="0 0 100 100">
  <linearGradient id="LinearGradientFill4" spreadMethod="pad" x1="0.2" x2="0.5" y1="1" y2="0.8">
    <stop offset="0" stop-color="#f7f7f7" ></stop>
    <stop offset="0.266" stop-color="#ea0000"></stop>
    <stop offset="0.7685" stop-color="#6c165f" ></stop>
    <stop offset="1" stop-color="#272020"  ></stop>
  </linearGradient>
  <rect fill="url(#LinearGradientFill4)"  rx="0" ry="0" x="0" y="0" width="100" height="100">
  </rect>
</svg>
<div class="rectangle" style="--s: 3.84;--p: 12%;--a: 56.3deg;">

</div>
<svg class="myRectangle" viewBox="0 0 100 100">
  <linearGradient id="LinearGradientFill5" spreadMethod="pad" x1="0.9" x2="0.2" y1="1" y2="0.8">
    <stop offset="0" stop-color="#f7f7f7" ></stop>
    <stop offset="0.266" stop-color="#ea0000" ></stop>
    <stop offset="0.7685" stop-color="#6c165f" ></stop>
    <stop offset="1" stop-color="#272020" ></stop>
  </linearGradient>
  <rect fill="url(#LinearGradientFill5)"  rx="0" ry="0" x="0" y="0" width="100" height="100">
  </rect>
</svg>
<div class="rectangle" style="--s: 1.7;--p: 10%;--a: -74.05deg;">

</div>

您保持颜色和百分比值相同。对于 SVG，您调整 x、y 值，对于 CSS，您调整变量( Angular 、偏移量和分隔线)

Angular 公式如下:

angle = arctang(Height*(x2 - x1)/Width*|y2 - y1|)

如果 y2 > y1，我们需要执行一个额外的步骤来获得 angle = 180deg - angle

要找到分隔符，我们需要考虑 CSS 渐变的长度，它等于

Dc = |Width * sin(angle)| + |Height * cos(angle)|

SVG 渐变的长度等于:

Ds = sqrt(Width²*(x2 - x1)² + Height²*(y2 - y1)²)

然后我们做一个简单的除法Dc/Ds

偏移量 p 的公式是 ((Dc/2 - d)*100)/Dc 其中 Dc 是长度之前定义的 CSS 渐变和 d 等于:

d = (Width²*(x1-0.5)*(x1-x2)+Height²*(y1-0.5)*(y1-y2))/(sqrt(Width²*(x2-x1)²+Height²*(y2-y1)²))

---

这是一个互动演示

function update() {
 var H = $('[name=h]').val();
 var W = $('[name=w]').val();
 var x1 = $('[name=x1]').val();
 var x2 = $('[name=x2]').val();
 var y1 = $('[name=y1]').val();
 var y2 = $('[name=y2]').val();
 $('#LinearGradientFill2').attr('x1',x1);
 $('#LinearGradientFill2').attr('x2',x2);
 $('#LinearGradientFill2').attr('y1',y1);
 $('#LinearGradientFill2').attr('y2',y2);
 $('polyline').attr('points',(x1*W)+','+(y1*H)+' '+(x2*W)+','+(y2*H));
 
 var angle = Math.atan((H*(x2 - x1))/Math.abs(W*(y2 - y1))) 
 if(y2 > y1)
    angle=Math.PI - angle;
 $('.rectangle').css("--a", (angle * 180 / Math.PI)+"deg");
 var Dc = Math.abs(W*Math.sin(angle)) + Math.abs(H*Math.cos(angle));
 var Ds = Math.sqrt(W*W*(x2 - x1)*(x2 - x1) + H*H*(y2 - y1)*(y2 - y1));
 var s=Dc/Ds;
 $('.rectangle').css("--s", s+'');
 var d = (W*W*(x1 - 0.5)*(x1 - x2)+H*H*(y1 - 0.5)*(y1 - y2))/Math.sqrt(W*W*(x2 - x1)*(x2 - x1) + H*H*(y2 - y1)*(y2 - y1));
 $('.rectangle').css("--p", (((Dc/2 - d)*100) / Dc)+"%");
 
 // update elements
 $('[name=a]').val(Math.floor(angle * 180 / Math.PI));
 $('rect').attr("width", W);
 $('.rectangle').css("width", W);
 $('.myRectangle').css("width", W);
 $('rect').attr("height", H);
 $('.rectangle').css("height", H);
 $('.myRectangle').css("height", H);
 $('.myRectangle').attr("viewBox", "0 0 " + W + " " +H);
};

$('input').change(update);
update();

.rectangle {  
  background: 
   linear-gradient(var(--a,0deg), 
    #f7f7f7  var(--p,0%), 
    #ea0000  calc(26.6%/var(--s,1) + var(--p,0%)), 
    #6c165f  calc(76.85%/var(--s,1) + var(--p,0%)), 
    #272020  calc(100%/var(--s,1) + var(--p,0%)));
}

.myRectangle,
.rectangle {
  width:150px;
  height:100px;
  display:inline-block;
  margin:10px;
  border:1px solid green;
}

input {
 width:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
W: <input type="number" name="w" step="1" value="100">
H: <input type="number" name="h" step="1" value="100">
A: <input type="number" name="a" disabled>
<br>
X1: <input type="number" name="x1" step="0.1" value="1">
X2: <input type="number" name="x2" step="0.1" value="0.5">
Y1: <input type="number" name="y1" step="0.1" value="0">
Y2: <input type="number" name="y2" step="0.1" value="0.5">
<br>
<svg class="myRectangle" >
  <linearGradient id="LinearGradientFill2" spreadMethod="pad" x1="0" x2="0" y1="1" y2="0">
    <stop offset="0" stop-color="#f7f7f7"></stop>
    <stop offset="0.266" stop-color="#ea0000"></stop>
    <stop offset="0.7685" stop-color="#6c165f"></stop>
    <stop offset="1" stop-color="#272020"></stop>
  </linearGradient>
  <rect id="rect" fill="url(#LinearGradientFill2)" rx="0" ry="0" x="0" y="0" width="150" height="100">
  </rect>
  <polyline stroke="green" points="0,1 0,0 "/>
</svg>
<div class="rectangle">

</div>

^{在处理正方形时，以上给出了完美的结果。对于矩形形状，仍然存在一些差异。检查公式...}