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

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

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

Фактический логотип, который я пытаюсь воссоздать в SVG (PNG):

Логотип кафе

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

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

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

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


svg html css radial-gradients
person Hideto    schedule 12.10.2015    source источник
comment
Элементы SVG не поддерживают свойство CSS фона. Вам нужно будет сделать это с помощью шаблона SVG.   -  person Robert Longson    schedule 12.10.2015

Ответы (1)


arrow_upward
5
arrow_downward

добавьте градиент в свой файл 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>

person Holger Will    schedule 12.10.2015
comment
Очень хорошо! Но в противном случае в настоящее время нет способа контролировать размер и цвета SVG извне в файле CSS? - person Hideto; 16.10.2015
comment
Я не уверен, что вы имеете в виду, но, конечно, вы можете изменить цвет SVG из внешней таблицы стилей. Размер SVG обычно изменяется в зависимости от его контейнера, поэтому стилизуйте их... Если я вас совершенно неправильно понял, рассмотрите возможность открытия другого вопроса и прикрепите упрощенный тестовый пример или скрипку... - person Holger Will; 16.10.2015
comment
В частности, я имею в виду, что градиенты указываются полностью вне SVG во внешнем файле, чтобы я мог перенести базовую форму куда угодно и изменить количество и типы цветовых остановок, которые имеет каждый экземпляр, используя только внешний лист. Я могу захотеть, чтобы мой логотип имел 6 цветовых точек на одной странице и, возможно, только 2 на другой. Я могу захотеть, чтобы тип градиента или начальная и конечная точки (например, верхняя или нижняя, левая или правая, какой угол и т. д.) были разными во многих разных местах. Как сделать это полностью из самого файла SVG? - person Hideto; 16.10.2015
comment
хорошо, теперь я понял. я обновил свой ответ вторым примером. - person Holger Will; 16.10.2015
comment
Это выглядит потрясающе! Итак, если у меня есть общие пути логотипа в его файле SVG и я делаю ссылку на его внешний файл CSS, и у меня есть, скажем, файл SVG с радиальным градиентом от фиолетового к желтому в верхнем левом углу и файл от зеленого к синему слева -to-right SVG-файл, я могу просто уточнить в CSS SVG, чтобы вызвать определенный градиент SVG, который я построил, который я хочу в то время? Например, создать несколько пользовательских градиентных SVG-файлов и вызвать их там, где я хочу? - person Hideto; 16.10.2015
comment
Точно! Вы можете иметь их в отдельных файлах или даже в одном файле коллекции градиентов, как вам удобно. Но, как я уже говорил, это не работает в хроме. - person Holger Will; 16.10.2015
comment
Дерьмо. И нет обходного пути Chrome, иначе вы бы упомянули об этом. Тогда, чтобы быть кросс-браузерным, лучше просто сделать все внутри файла SVG и просто иметь несколько экземпляров, таких как LogoPurple.svg и LogoOrange.svg, и включать файл логотипа определенного цвета, который я хочу в то время? - person Hideto; 16.10.2015
comment
Это зависит от того, сколько различных градиентных структур у вас есть по сравнению с тем, сколько существует цветовых вариаций. Кроме того, можно было бы написать прокладку для хрома. Я посмотрю на это позже. - person Holger Will; 16.10.2015