Question

如何更改按钮上的svg颜色：通过定位图像路径悬停状态，例如/img/example.svg？

即

svg的颜色为灰色，如＆＃34; example.svg＆＃34;存储在/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;
}

Answer 1

CSS不适用于文档边界。因此，如果CSS位于HTML端，如果SVG位于单独的文件中，则不会影响SVG。

但是，您可以向SVG添加<style>元素，该元素包含您的悬停规则。只要您使用<object>或<embed>加入SVG，这就应该有效。如果您使用的是<img>或background-image，它将无法正常工作。

通过外部CSS更改SVG覆盖

1 个答案: