Проблемы с SVG с CSS?

Привет, я новичок в использовании SVG, но я думал, что вся идея SVG заключается в том, что вы можете изменить фоновый цвет и т. Д. В любом случае я использую открытые исходники clrs.cc, и у него есть как svg-заливки, так и штрихи, встроенные в но никто не работает на моем значке поиска.Проблемы с SVG с CSS?

<img src="ic_search_48px.svg" class="fill-navy" alt="This should be a search icon">

Вот что классы CSS выглядит следующим образом:

.fill-navy { 
fill: #001F3F; }

Спасибо за помощь!

источник

2015-02-19 kingkapd

Он показывает вверх по дороге, но в черном цвете. – kingkapd

Можете ли вы опубликовать скрипку? В идеале вы можете изменить цвет 'fill' элементов' path' в SVG. – ArinCool

Итак, SVG похож на собственный язык кода? Btw значок поиска i только из Googles Material design. – kingkapd

В принципе, вы не можете изменить цвет SVG, используемый как фактическое изображение или фоновое изображение.

CSS может влиять только на inline SVG на странице HTML.

EG.

.hidden { 
 
    display: none; 
 
} 
 
.icon { 
 
    width: 48px; 
 
    height: 48px; 
 
} 
 
.large { 
 
    width: 96px; 
 
    height: 96px; 
 
} 
 
.red { 
 
    fill: red; 
 
} 
 
.green { 
 
    fill: green; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" class="hidden"> 
 
    <defs> 
 
    <g id="search" viewBox="0 0 48 48"> 
 
     <path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z" /> 
 
    </g> 
 
    </defs> 
 
</svg> 
 

 
<svg class="icon" viewBox="0 0 48 48">> 
 
    <use xlink:href="#search" class="red" /> 
 
</svg> 
 

 
<svg class="icon large" viewBox="0 0 48 48">> 
 
    <use xlink:href="#search" class="green" /> 
 
</svg>

Extra Reading - Article @ CSS-Tricks.com
Также - SVG Icons @ CSS-Tricks.com

источник

2015-02-19 10:41:37

Проблемы с SVG с CSS?

ответ

Смежные вопросы