代码之家 › 专栏 › 技术社区 › Isaac

基于父对象填充颜色?

path sass svg css

Isaac · 技术社区 · 4 年前

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

当我将鼠标悬停在标记上时,我真的希望SVG更改填充颜色,而不加载新的SVG文件,正如我现在所做的:

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

这是否可以通过JavaScript、jQuery或者我不知道的纯CSS来实现?

谢谢。

0 回复 | 直到 11 年前

Community pid 7 年前

使用 content 属性生成(未公开的)标记,其功能等同于<img>元素中的svg。

无法将样式应用于svg文档中的元素,因为:

样式不允许在文档之间层叠
使用<img>(或 内容 ,或任何引用svg的css图像属性)出于安全考虑,浏览器不会公开svg文档

类似的问题,但是 background-image here 和 here

所以,要想做你想做的事,你必须绕过以上两点。有多种方法可供选择,例如使用内联svg、使用过滤器(应用于<img>)或生成不同的svg文件(或数据uri),如您的问题所示。

lmaooooo 4 年前

公认的答案是不正确的,这实际上可以通过使用

p:after {
  width: 48px;
  height: 48px;
  display: inline-block;
  content: '';
  -webkit-mask: url(https://gist.githubusercontent.com/mmathys/fbbfbc171233a30e478ad5b87ec4f5d8/raw/cd9219e336b8f3b85579015bdce9665def091bb8/heart.svg) no-repeat 50% 50%;
  mask: url(https://gist.githubusercontent.com/mmathys/fbbfbc171233a30e478ad5b87ec4f5d8/raw/cd9219e336b8f3b85579015bdce9665def091bb8/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>

实际上,您并不是在修改svgdom本身,而是在更改背景颜色。这样,您甚至可以使用图像或渐变作为背景。

更新

~~正如先生所说, this feature is sadly not widely supported~~

六年后,对前缀使用的支持已经上升到 97%

推荐文章

noGodHere · Python使用错误的路径写入文件

1 年前

ManOnTheMoon · 使用循环创建的文件夹/子文件夹的文件路径错误

2 年前

Timur Shtatland · 如何在“sed”(例如,no PREFIXPREFIX)中只向路径预加一次前缀(以幂等方式)?

2 年前

Bakare Kazeem · 如何使用node将图像转换为PDF。没有第三方Api的js

2 年前

Giao LÃª · SDL2库的资源路径

2 年前

benroths · PyQt5/Python3参考qss文件

2 年前

killuaZd · JFileChooser在其他actionevent中重用路径

2 年前

Sean McCallum · 如何在批处理脚本子例程中获取Java版本?

6 年前

GrumbleBumpkin · Anaconda3自定义安装位置:“conda”不工作

6 年前

Kenny · 如何使用路径中的变量编写vba

6 年前