通过外部 CSS 更改 SVG 覆盖答案

【问题标题】：Change SVG overlay through external CSS通过外部 CSS 更改 SVG 覆盖
【发布时间】：2015-03-08 11:34:03
【问题描述】：

如何通过定位图像路径（例如 /img/example.svg）在 :hover 状态下更改按钮内的 svg 颜色？

即

根据存储在/img/example.svg中的“example.svg”，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;
}

【问题讨论】：

标签： css svg svg-filters

【解决方案1】：

CSS 不能跨文档边界工作。所以如果 CSS 在 HTML 端，它不会影响 SVG，如果 SVG 在单独的文件中。

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

【讨论】：

是在svg还是html里面？