如何在 CSS ::before 和 ::after 伪元素中嵌入 SVG？

在 ::before 和 ::after 伪元素中使用 SVG

通常希望将 SVG 图像作为内容嵌入到伪元素中::之前和::之后。虽然纯文本版本不起作用，但还有使用 URL() 或内联数据 URI 的替代解决方案。

使用 URL()

第一种方法涉及引用SVG 文件的 URL：

#mydiv::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

使用数据URI

另一个选项是使用数据 URI 编码将 SVG 直接编码到 CSS 中：

#mydiv::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

此方法允许您将 SVG 图像直接嵌入到 CSS 中，从而使它是独立的。

以上是如何在 CSS ::before 和 ::after 伪元素中嵌入 SVG？的详细内容。更多信息请关注PHP中文网其他相关文章！