是否可以在CSS背景中设置类似于SVG起点和终点位置的渐变起点和终点位置？

Question

在SVG渐变中，您可以设置起始xy和终止xy位置。是否有可能在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>

我一直在引用此页面的MDN与此页面上的W3C。

SVG包含渐变的方向

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

元素还具有其他几个属性，这些属性指定渐变的大小和外观。渐变的方向由两个点控制，这两个点由属性x1，x2，y1和y2指定。这些属性定义了一条渐变线。渐变默认为水平方向，但可以通过更改它们来旋转。上面示例中的Gradient2设计为创建垂直渐变。-来自https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Gradients

从其他文档中：

渐变线起点的X和Y位置，为对象边界框的倍数：X = 0表示边界框的左边缘，X = 1表示右边缘。渐变线可能在对象边界框外开始或结束，因此值可能<0或> 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>

您可以保持颜色和percetange值相同。对于SVG，您可以调整x，y值；对于CSS，您可以调整变量（角度，偏移量和除法器）

角度的公式如下：

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)²))

这是一个互动演示

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

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

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

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