Ответ 1

Просто используйте CSS, что бы вы ни использовали в атрибуте fill. Конечно, это требует, чтобы вы определили линейный градиент где-нибудь в вашем SVG.

Вот полный пример:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
      
      <rect width="100" height="50"/>
    </svg>

Ответ 2

2019 Ответ

Благодаря новым свойствам CSS вы можете иметь еще большую гибкость с переменными, также известными как custom properties

.shape {
  width:500px;
  height:200px;
}

.shape .gradient-bg {
  fill: url(#header-shape-gradient) #fff;
}

#header-shape-gradient {
  --color-stop: #f12c06;
  --color-bot: #faed34;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="shape">
  <defs>
    <linearGradient id="header-shape-gradient" x2="0.35" y2="1">
        <stop offset="0%" stop-color="var(--color-stop)" />
        <stop offset="30%" stop-color="var(--color-stop)" />
        <stop offset="100%" stop-color="var(--color-bot)" />
      </linearGradient>
  </defs>
  <g>
    <polygon class="gradient-bg" points="0,0 100,0 0,66" />
  </g>
</svg>

Ответ 3

Основываясь на том, что написал Изящество, вот более простой способ нацелить svg и изменить его градиент.

Это то, что вам нужно сделать:

1. Назначьте классы для каждой остановки цвета, определенной в элементе градиента.
2. Установите таргетинг на CSS и измените цвет стопа для каждой из этих остановок, используя простые классы.
3. Победа!

Некоторые преимущества использования классов вместо :nth-child заключаются в том, что это не повлияет на изменение порядка ваших остановок. Кроме того, он проясняет цели каждого класса - вам будет интересно, нужен ли вам синий цвет для первого или второго ребенка.

Я протестировал его на всех Chrome, Firefox и IE11:

.main-stop {
  stop-color: red;
}
.alt-stop {
  stop-color: green;
}

<svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="gradient">
    <stop class="main-stop" offset="0%" />
    <stop class="alt-stop" offset="100%" />
  </linearGradient>
  <rect width="100" height="50" fill="url(#gradient)" />
</svg>

Ответ 4

Вот решение, в котором вы можете добавить градиент и изменить его цвета, используя только CSS:

// JS is not required for the solution. It used only for the interactive demo.
const svg = document.querySelector('svg');
document.querySelector('#greenButton').addEventListener('click', () => svg.setAttribute('class', 'green'));
document.querySelector('#redButton').addEventListener('click', () => svg.setAttribute('class', 'red'));

svg.green stop:nth-child(1) {
  stop-color: #60c50b;
}
svg.green stop:nth-child(2) {
  stop-color: #139a26;
}

svg.red stop:nth-child(1) {
  stop-color: #c84f31;
}
svg.red stop:nth-child(2) {
  stop-color: #dA3448;
}

<svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="gradient">
    <stop offset="0%" />
    <stop offset="100%" />
  </linearGradient>
  <rect width="100" height="50" fill="url(#gradient)" />
</svg>

<br/>
<button id="greenButton">Green</button>
<button id="redButton">Red</button>

Ответ 5

Вот как установить linearGradient для целевого элемента:

<style type="text/css">
    path{fill:url('#MyGradient')}
</style>
<defs>
    <linearGradient id="MyGradient">
        <stop offset="0%" stop-color="#e4e4e3" ></stop>
        <stop offset="80%" stop-color="#fff" ></stop>
    </linearGradient>
</defs>