将 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 风格复制它。

Answer 1

要获得最终的渐变，您需要首先考虑定义方向的 x1/y1/x2/y2（直到现在这很容易）然后您需要能够理解使用 [=14 后对渐变所做的转换=]) 或者您查看渐变并尝试对其进行近似。

我个人可以做近似值：

.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>

Answer 2

试试这个：

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

希望对您有所帮助 ;)

将 linearGradient 转换为 CSS 背景

Convert linearGradient to CSS background

css

svg

linear-gradients