Изменить наложение SVG через внешний CSS

Как изменить цвет svg внутри кнопки: состояние зависания путем ориентации пути изображения, например /img/example.svg?Изменить наложение SVG через внешний CSS

I.e.

Цвет серый SVG в соответствии с «example.svg», хранящегося в /img/example.svg

При наведении курсора он меняет цвет от серого до белого, не имея .svg инлайн, но нацеливание его через путь к папке img. Svg не является встроенным в html-документе.

В приведенном ниже примере я добавил его в HTML, но для этого примера вам нужно настроить таргетинг на файл изображения, не входящий в HTML.

Приложенный jsfiddle ссылку http://jsfiddle.net/eofst39x/1/

HTML

 <br> 
    <a href="#"> 
     <div class="btn btn-sm btn-nav-top"> 
      <svg version="1.1" id="svg-overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"> 
<path fill="#b1b1b1" d="M27.297,4.902c-6.134-6.176-16.112-6.21-22.289-0.076c-6.177,6.134-6.209,16.112-0.077,22.289 
    c6.135,6.176,16.113,6.21,22.29,0.076C33.397,21.057,33.43,11.079,27.297,4.902z M22.941,4.171l-3.343,3.32 
    c-2.208-0.902-4.695-0.911-6.909-0.024L9.369,4.124C13.57,1.742,18.757,1.76,22.941,4.171z M7.574,19.434l-3.343,3.32 
    c-2.383-4.201-2.365-9.389,0.047-13.574l3.321,3.343C6.696,14.731,6.688,17.22,7.574,19.434z M9.287,27.846l3.344-3.32 
    c2.207,0.902,4.696,0.911,6.909,0.024l3.32,3.343C18.66,30.275,13.471,30.258,9.287,27.846z M21.13,21.06 
    c-2.786,2.766-7.301,2.75-10.068-0.035c-2.766-2.785-2.75-7.301,0.036-10.067s7.301-2.751,10.067,0.034S23.916,18.293,21.13,21.06z 
    M24.63,19.493c0.902-2.208,0.912-4.696,0.024-6.91l3.343-3.32c2.382,4.2,2.365,9.388-0.047,13.574L24.63,19.493z"/> 
</svg> 
      Recolor This SVG on Left</div> 
    </a> 
<br>

CSS

.btn-nav-top { 
    color: #BBBBBB; 
    background-color: #FFFFFF; 
    border-color: #BBBBBB; 
    font-size: 12px; 
    font-weight: 100; 
} 
.btn-nav-top img { 
    width: 15px; 
    padding-right: 4px; 
    padding-bottom: 2px; 
} 

.btn-nav-top:hover { 
    transition: 0.2s; 
    color: #ffffff; 
    background-color: #EE2798; 

} 

.btn-nav-top:hover { 
    fill: #ffffff;  
} 

.btn-nav-top:focus, 
.btn-nav-top:active, 
.btn-nav-top.active, 
.open .dropdown-toggle.btn-nav-top { 
    color: #BBBBBB; 
    background-color: #c10b75; 
    border-color: #BBBBBB; 
} 

.btn-nav-top:active, 
.btn-nav-top.active, 
.open .dropdown-toggle.btn-nav-top { 
    background-image: none; 
    color: #fff; 
} 

.btn-nav-top.disabled, 
.btn-nav-top[disabled], 
fieldset[disabled] .btn-nav-top, 
.btn-nav-top.disabled:hover, 
.btn-nav-top[disabled]:hover, 
fieldset[disabled] .btn-nav-top:hover, 
.btn-nav-top.disabled:focus, 
.btn-nav-top[disabled]:focus, 
fieldset[disabled] .btn-nav-top:focus, 
.btn-nav-top.disabled:active, 
.btn-nav-top[disabled]:active, 
fieldset[disabled] .btn-nav-top:active, 
.btn-nav-top.disabled.active, 
.btn-nav-top[disabled].active, 
fieldset[disabled] .btn-nav-top.active { 
    background-color: #FFFFFF; 
    border-color: #BBBBBB; 
} 

.btn-nav-top .badge { 
    color: #FFFFFF; 
    background-color: #BBBBBB; 
} 

#svg-overlay svg:hover { 
    fill: #ffffff; 
}

источник

2015-01-10 man-oh-man

CSS не работает через границы документа. Поэтому, если CSS находится на стороне HTML, это не может повлиять на SVG, если SVG находится в отдельном файле.

Однако вы можете добавить элемент <style> в свой SVG, в котором есть правила наведения. Это должно работать до тех пор, пока вы включаете SVG, используя <object> или <embed>. Это не сработает, если вы используете <img> или background-image.

источник

2015-01-10 03:36:04

Это внутри svg или html? –

Изменить наложение SVG через внешний CSS

ответ

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