有没有办法在伪元素::before或::after中使用SVG作为内容？

8 浏览
0 Comments

有没有办法在伪元素::before或::after中使用SVG作为内容？

我想使用::before来在一些选定的元素之前放置SVG图像：

#mydiv::before {
  content: '';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

上述代码只显示纯文本。

我查看了规范，似乎对content有一些限制。CSS的content属性解决方案更可取。

0

3 答案

0 Comments

SVG作为伪元素::before或::after的内容使用的原因是想要在伪类中添加SVG图像作为装饰或图标。通过将SVG图像作为内容属性的URL值，可以在伪类中显示SVG图像。然而，一些用户尝试这样做时遇到了问题，无法正确地调整SVG图像的大小或样式。

解决方法是使用正确的CSS属性来调整SVG图像的大小和样式。首先，可以使用content属性将SVG图像作为URL引用，然后使用width和height属性来指定图像的大小。如果希望直接将SVG代码嵌入到CSS中，可以使用data URI将SVG代码转换为URL，并将其作为content属性的值。然后，可以使用其他CSS属性来调整SVG图像的样式，如fill属性来改变填充颜色。

注意，有些用户尝试使用SVG sprites时遇到了问题，无法正确地引用其中的图标。对于这种情况，可以在SVG中定义视图，并使用片段标识符（如#my-icon）来引用特定的图标。

总结起来，可以通过将SVG图像作为content属性的URL值或使用data URI将SVG代码嵌入到CSS中来在伪类中显示SVG图像。然后，可以使用其他CSS属性来调整SVG图像的大小和样式。对于使用SVG sprites的情况，需要定义视图并使用片段标识符来引用特定的图标。

0
0 Comments

使用CSS函数url()可以在伪元素::before或::after中使用SVG作为内容。

解决方法如下：

1. 确保SVG中不含有#符号，可以使用编码器进行编码，例如使用这个编码器。

2. 由于SVG通常使用双引号，可以使用外部单引号来包裹代码。

3. 在SVG的部分添加xmlns='http://www.w3.org/2000/svg'，以适配Chrome 66.x。

4. 注意url中的#符号需要进行url编码，替换为%23，并删除所有换行符。

5. 可以使用yoksel.github.io/url-encoder来安全地将SVG图像编码为URL数据。

6. 如果从Font Awesome等地方复制SVG代码，确保content: URL (' ');中使用单引号，并在逗号和闭合单引号之间添加content:URL ('data:image/svg+xml;charset=UTF-8,');，然后粘贴SVG代码。

通过以上方法可以解决在伪元素中使用SVG作为内容的问题。然而，需要注意的是，这种方法在IE11中不被支持，可以使用url('file.svg')代替。

0
0 Comments

问题的原因是：使用SVG作为伪元素::before或::after的内容时，Opera Mini浏览器不支持background-size属性，导致无法正常显示。

解决方法是：将SVG作为background-image添加到空的::before或::after伪元素中。可以通过设置background-size属性来控制插入元素的尺寸。另外，还可以在SVG文件的开头添加""来使其正常工作。此外，还可以将SVG文件转换为base64编码，并在CSS中使用data URI的方式引用。

0