问

在CSS之前或之后更改SVG填充颜色

滴滴发布于 2023-01-29 19:27

svg

我有一个像这样的SVG图形:

a::before { content: url(filename.svg); }

当我将鼠标悬停在标签上时,我真的希望SVG更改填充颜色,而不加载新的SVG文件,就像我现在一样:

a:hover::before { content: url(filename_white.svg); }

这可能是使用JavaScript,jQuery或只是我不知道的纯CSS实现的吗？

谢谢.

2 个回答

接受的答案是不正确的,这实际上可以通过应用SVG蒙版和背景颜色的变通方法来实现:

p:after {
  width: 48px;
  height: 48px;
  display: inline-block;
  content: '';
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.red:after {
  background-color: red;
}

.green:after {
  background-color: green;
}

.blue:after {
  background-color: blue;
}


<p class="red">red heart</p>
<p class="green">green heart</p>
<p class="blue">blue heart</p>


                
                    2023-01-29 19:28  回答
                       书琳天使_984


                        
                使用该content属性在功能上生成(非暴露)标记,与<img>元素中的svg相同.

您不能将样式应用于svg文档中的元素,因为:


样式不允许跨文档级联
当使用<img>(或content,或任何引用svg的css图像属性)时,由于安全问题,浏览器不会公开svg文档


类似的问题,但在background-image 这里和这里.

所以,要做你想做的事,你必须以某种方式绕过两点.这样做有多种选择,例如使用内联svg,使用过滤器(应用于<img>)或生成不同的svg文件(或数据URI),如问题所示.

        
                
                    2023-01-29 19:28  回答
                       雅皮享客被



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签