Как для SVG задать background-image: linear-gradient?

Question

[Игорь]

background-image: linear-gradient(-11deg, #83C5E5 0%, transparent 14.5%, transparent 62%, #83C5E5 76.5%, #83C5E5), linear-gradient(65deg, #83C5E5 31%, transparent 43.5%, transparent 57%, #83C5E5 76.5%, #83C5E5), linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5), linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, rgb(131, 197, 229) 87.5%, rgb(131, 197, 229)), linear-gradient(60deg, rgb(254, 85, 104) 25%, transparent 25.5%, transparent 75%, rgb(254, 85, 104) 75%, rgb(254, 85, 104)), linear-gradient(60deg, rgb(254, 85, 104) 25%, transparent 25.5%, transparent 75%, rgb(254, 85, 104) 75%, rgb(254, 85, 104));

вместо bacground-color использую fill: #4D756D;

а background-image: linear-gradient как сделать?

Спасибо!

Answer 1

[Дмитрий Кравченко]

<svg>
  <defs>
    <linearGradient id='myGradient'>
      <stop offset='0%' stop-color='red'></stop>
      <stop offset='100%' stop-color='blue'></stop>
    </linearGradient>
  </defs>
  <circle cx='100' cy='100' r='50' fill='url(#myGradient)' />
</svg>

codepen.io/imdmitrykravchenko/pen/JGxBwB

Comments

[Игорь]

linear-gradient(-11deg, #83C5E5 0%, transparent 14.5%, transparent 62%, #83C5E5 76.5%, #83C5E5)

такого формата значения как мне задать?

[Дмитрий Кравченко]

Игорь Николаевич: обновил пен

[Игорь]

Дмитрий Кравченко: prntscr.com/a31jhv
дык мне такой градиент нужно для свг сделать а не для дива)

[Дмитрий Кравченко]

Игорь Николаевич: в пене и свг и див

[Игорь]

Дмитрий Кравченко: )))))))зачем мне див?
у меня сложная кривая конструкция из свг

[Дмитрий Кравченко]

Игорь Николаевич: я не заставляю копировать оттуда див, он стоит рядом для примера

[Игорь]

Дмитрий Кравченко: https://jsfiddle.net/rhchs86f/
ну и как такой градиент для свг сделать?

[Дмитрий Кравченко]

Игорь Николаевич: я не знаю. начальный вопрос был несколько другим

[Дмитрий Кравченко]

Игорь Николаевич: скорей всего, нужно использовать паттерн https://developer.mozilla.org/en-US/docs/Web/SVG/T...

[Игорь]

Дмитрий Кравченко: да,видел это,но там слишком не привычно...проще уже через илюстратор сделать

[Игорь]

Дмитрий Кравченко: https://jsfiddle.net/se8pdo8g/

как правильно use задать чтобы норм отображалась?
чот я не понял кому и какой айди цеплять.