在:before或:after CSS中更改SVG填充颜色。

7 浏览

3 答案

0 Comments

问题的出现原因是：使用content属性生成的标记与元素中的svg在功能上是等效的，但是无法对svg文档内的元素应用样式，原因有两个：1. 样式不允许在文档之间级联；2. 当使用（或content、或引用svg的任何css图像属性）时，由于安全问题，浏览器不会公开svg文档。

解决方法是：绕过上述两个限制，可以采用以下几种方法：使用内联svg、使用滤镜（应用于元素）或生成不同的svg文件（或数据URI），就像你在问题中提到的。

0
0 Comments

问题的出现原因是：用户想要通过CSS中的:before或:after伪元素来改变SVG图像的填充颜色，但是默认的方式并不能实现这个效果。

解决方法是：通过使用SVG遮罩和背景颜色的技巧来实现。具体实现方式是在:before或:after伪元素的样式中添加一个SVG遮罩属性，并将SVG图像作为遮罩的背景。然后通过设置伪元素的背景颜色来改变SVG图像的填充颜色。这样就可以实现改变SVG图像填充颜色的效果。同时，还可以使用图片或渐变作为背景。

需要注意的是，这种方法并不是直接修改SVG DOM本身，而是通过改变背景颜色来实现的。因此，需要注意浏览器的兼容性。这种方法在大部分浏览器中都能正常工作，但是在部分浏览器中可能不被支持。因此，在使用这种方法时需要注意浏览器的兼容性，并根据需要决定是否放弃一些不支持的浏览器。

在更新部分中，提到了该方法的浏览器支持情况。经过六年的时间，这种方法在大部分浏览器中的支持率已经达到了97%。然而，仍然有一些浏览器不支持这种方法，比如Firefox。因此，在使用这种方法时，仍然需要考虑浏览器的兼容性，并根据需要决定是否放弃一些不支持的浏览器。

通过在:before或:after伪元素的样式中添加SVG遮罩属性，并通过设置背景颜色来改变SVG图像的填充颜色，可以实现改变SVG图像填充颜色的效果。然而，需要注意浏览器的兼容性，并根据需要决定是否放弃一些不支持的浏览器。

0
0 Comments

问题的原因：在CSS中，无法直接更改使用:after或:before伪元素的SVG填充颜色。

解决方法：可以通过使用-webkit-mask-image和mask-image属性，将SVG图像作为掩码来更改填充颜色。同时，使用clip-path属性来防止背景色在Safari中泄漏。

以下是解决问题的代码示例：

a[target="_blank"]:after {
  background-color: currentColor;
  content: "";
  padding: 0 0.5em;
  margin: 0 0.125rem;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  clip-path: padding-box inset(0.28125em 0);
}


Lorem ipsum sumit dolar <a href="#" target="_blank">hello world</a>

以上代码可以在使用标签时，在其后添加一个填充颜色可以改变的图标。

0