Конвертировать linearGradient в CSS фон - PullRequest
Новая
       19

Конвертировать linearGradient в CSS фон

0 голосов
/ 06 декабря 2018

У меня есть 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.

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Попробуйте это: 

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

Я надеюсь, что я помог;)

0 голосов
/ 07 декабря 2018

Чтобы получить окончательный градиент, вам нужно сначала рассмотреть 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>
...