Как градиентно заполнить SVG из внешней таблицы стилей?

Question

Я люблю внешние таблицы стилей и хочу иметь возможность стилизовать любую графику SVG с помощью внешнего листа. Я могу объявить одноцветный штрих и заливку для моего логотипа SVG, но я хочу градиентную заливку. Я пробовал смотреть вещи, но не могу заставить его работать правильно. Может кто-нибудь помочь мне разобраться, как заставить это работать?

Я не уверен, как поместить фрагмент кода, учитывая, что я обсуждаю внешний код, а не встроенный, поэтому вот ссылка на рассматриваемый логотип SVG и соответствующую ему внешнюю таблицу стилей.

Актуальный логотип я пытаюсь воссоздать в SVG (PNG):

Логотип SVG: http://www.cafenocturne.com/testpage/images/svg/CafeLogoSVG.svg

Таблица стилей: http://www.cafenocturne.com/testpage/css/CafeLogoSVG.css

Есть некоторые закомментированные заметки, чтобы убедиться, что я не теряю код градиента, который я пытаюсь реализовать, поэтому я извиняюсь, что файл CSS - беспорядок. Как только я смогу заставить его работать правильно, мне не нужно будет делать там заметки.

Так как мне этого добиться?

Answer 1

Добавьте градиент к вашему SVG-файлу и измените цвет остановки с CSS:

#color1 {
  stop-color: red
}
#color2 {
  stop-color: blue
}

<svg>
  <linearGradient id="lg">
    <stop id="color1" offset="0" />
    <stop id="color2" offset="1" />
  </linearGradient>
  <circle cx="50" cy="50" r="45" fill="url(#lg)" />
</svg>

если вам нужен больший контроль над вашими градиентами, вы можете указать градиенты в отдельном файле (скажем, myGradients.svg)

<svg xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="g1">
    <stop offset="0" stop-color="red"/>
    <stop offset="1" stop-color="blue"/>
  </linearGradient>
  <linearGradient id="g2">
    <stop offset="0" stop-color="green"/>
    <stop offset="1" stop-color="yellow"/>
  </linearGradient>
</svg>    

Теперь в вашем CSS вы можете сделать

.logo {fill: url('myGradients.svg#g2');}

к сожалению, это не работает в Chrome:-(

в качестве альтернативы вы можете иметь копию вашей коллекции градиентов в файле логотипа или в формате html и по-прежнему стилизовать ее с помощью CSS

.color1 {
  stop-color: green
}
.color2 {
  stop-color: yellow
}
#logo1 {
  fill: url(#g1)
}
#logo2 {
  fill: url(#g2)
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="0" height="0">
  <linearGradient id="g1">
    <stop offset="0" class="color1" />
    <stop offset="1" class="color2" />
  </linearGradient>
  <radialGradient id="g2">
    <stop offset="0" class="color1" />
    <stop offset="1" class="color2" />
  </radialGradient>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle id="logo1" cx="50" cy="50" r="45" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle id="logo2" cx="50" cy="50" r="45" />
</svg>