Question

您好我想知道如何在内部选择SVG并在悬停时更改它的颜色。

我的svg是从span中的另一种风格调用的：

<a href="#"><div><span class=icon over"></span></div></a>

我想做的是这样的事情：

a:hover > div > span { fill: #fff; }

但它不适用于SVG。在实际范围内它与其他财产合作。

所以问题是如何改变SVG的颜色，SVG的颜色是在span元素中包含svg的另一种样式。

SVG代码：

.icon{

background: url(../img/sprite.view.svg) no-repeat;
    display: inline-block;
    text-indent: -9000px;
    white-space: nowrap;

}

.over {
    background-position: 80.45977011494253% 26.016260162601625%;
    width: 32px;
    height: 32px;
}

Answer 1

为什么它无法正常工作的原因是因为在通过img代码，object代码或{{{} {}导入SVG时无法更改任何颜色1}}一个元素。

为了使用CSS操作SVG，它必须是内联的，内联如下：

background

将您的标记更改为我上面所做的，将整个SVG文件放在<a href="#"> <div class="svg-container"> <svg></svg> </div> </a>中，然后像这样应用CSS：

div

正如有人指出的那样，如果SVG真的很大，你可以用Javascript更改.svg-container { > svg { fill: #fff; stroke: #000; } }标签，如果需要使用它而不是内联SVG。

在跨度内部更改SVG颜色称为另一种样式

1 个答案: