将linearGradient转换为CSS背景

Question

我有一个包含以下内容的SVG:

<linearGradient id="path-2_2_" gradientUnits="userSpaceOnUse" x1="-275.652" y1="410.9046" x2="-275.0113" y2="412.0578" gradientTransform="matrix(46 0 0 -45.9998 12690 18947.9102)">
    <stop offset="0" style="stop-color: rgb(248, 64, 24);"></stop>
    <stop offset="0.6458" style="stop-color: rgb(248, 64, 24); stop-opacity: 0.6009;"></stop>
    <stop offset="1" style="stop-color: rgb(248, 64, 24); stop-opacity: 0.2527;"></stop>
</linearGradient>

我想把它转换成CSS背景，但效果并不理想：

background: linear-gradient(
  rgb(248, 64, 24) 0%
  rgba(248, 64, 24 0.60) 65%,
  rgba(248, 64, 24 0.25) 100%,
 );

gradientTransform 有它的作用，但我不确定是什么，也不知道如何在我的CSS样式中复制它。

- Mister Epic

---

如果您不添加SVG标签，您将无法召唤SVG巫师 :) - Temani Afif

Answer 1

要获得最终的渐变效果，首先需要考虑定义方向的x1/y1/x2/y2（这很容易），然后需要理解在使用gradientTransform后对渐变所做的转换，这并不容易。因此，您可以是SVG和数学大师，可以计算出在CSS中需要使用的值，或者使用可以转换渐变的工具（如http://gradientfinder.com/），或者尝试近似渐变效果。

个人而言，我可以进行近似：

.box {
  background: 
  linear-gradient(30deg, rgb(248, 64, 24) 30%, rgba(248, 64, 24, 0.60) 42%, rgba(248, 64, 24, 0.25) 50%);
  width: 400px;
  height: 150px;
}

<svg height="150" width="400">
  <defs>
    <linearGradient id="path-2_2_" gradientUnits="userSpaceOnUse" x1="-275.652" y1="410.9046" x2="-275.0113" y2="412.0578" gradientTransform="matrix(46 0 0 -45.9998 12690 18947.9102)">
    <stop offset="0" style="stop-color: rgb(248, 64, 24);"></stop>
    <stop offset="0.6458" style="stop-color: rgb(248, 64, 24); stop-opacity: 0.6009;"></stop>
    <stop offset="1" style="stop-color: rgb(248, 64, 24); stop-opacity: 0.2527;"></stop>
</linearGradient>

  </defs>
  <rect x="0" y="0" width="400" height="150" fill="url(#path-2_2_)" />
</svg>

<div class="box">
</div>

- Temani Afif

Answer 2

试试这个：

body{
  background-image: url(/*link to your svg file*/)
}

希望能对您有所帮助；）

- Maciej Bledkowski

---

你没有回答问题或提供有意义的替代方案。 - Tom