时间戳

首页 > 解决方案 > 将线性渐变转换为 CSS 背景

css - 将线性渐变转换为 CSS 背景

问题描述

我有一个带有以下内容的 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 样式中复制它。

标签： csssvglinear-gradients

解决方案

要获得最终的渐变，您首先需要考虑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>

推荐阅读