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

Question

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

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

Actual логотип Я пытаюсь воссоздать в 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');} 

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

в качестве альтернативы вы можете иметь копию вашей коллекции градиента в файле логотипа или 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>