在 CSS 中使用 SVG 图像内联:before 伪元素

Posted

技术标签:

【中文标题】在 CSS 中使用 SVG 图像内联:before 伪元素【英文标题】:Use SVG image inline inside CSS :before pseudo-element 【发布时间】:2018-08-07 04:09:29 【问题描述】:

我有一个简单的 SVG 图像:

<svg   viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M0 0 H 20 L 10 20 Z" fill="yellow"></path>
    <path d="M30 20 H 50 L 40 0 Z" fill="black"></path>
    <path d="M60 0 H 80 L 70 20 Z" fill="yellow"></path>
</svg>

我没有将其作为图像包含在内,而是考虑将其内联到带有 SASS 的 ::before 伪元素中:

div:before 
  content: str-replace(url('data:image/svg+xml;charset=utf8,%3Csvg width='auto' height='10px' viewBox='0 0 80 20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M0 0 H 20 L 10 20 Z' fill='yellow'%3E%3C/path%3E%3Cpath d='M30 20 H 50 L 40 0 Z' fill='black'%3E%3C/path%3E%3Cpath d='M60 0 H 80 L 70 20 Z' fill='yellow'%3E%3C/path%3E%3C/svg%3E'), "#", "%23");

https://codepen.io/Deka87/pen/zRMmpr

但是,我在 Codepen 和我的本地编译器中都收到一条错误消息。任何帮助将不胜感激!

【问题讨论】:

【参考方案1】:

试试这个:

div::before 
 content: '';
 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22auto%22%20height%3D%2210%22%20viewBox%3D%220%200%2080%2020%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h20L10%2020z%22%20fill%3D%22%23ff0%22/%3E%3Cpath%20d%3D%22M30%2020h20L40%200z%22/%3E%3Cpath%20d%3D%22M60%200h20L70%2020z%22%20fill%3D%22%23ff0%22/%3E%3C/svg%3E');

我使用http://www.grumpicon.com/这个网站将SVG转换为CSS背景

【讨论】:

是的!我一直在寻找这样的工具但失败了! @sdvnksv 我使用jakearchibald.github.io/svgomg 来优化 SVG 并使其更小,然后在 grumpicon 中运行它以创建该链接。

以上是关于在 CSS 中使用 SVG 图像内联:before 伪元素的主要内容,如果未能解决你的问题,请参考以下文章

css 内联SVG作为css背景图像

如何将带有css样式的内联SVG从浏览器保存/导出到图像文件

在 React 中用内联 svg 替换图像元素

设置内联 SVG 的填充颜色 [重复]

SVG:为啥外部 css 会覆盖文本的内联样式?

SVG 内联 CSS 未在 Internet Explorer 中显示