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（到现在为止很容易），然后您需要能够理解使用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>

Answer 2

尝试一下：

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

我希望我能提供帮助;）

将linearGradient转换为CSS背景

2 个答案: