在CSS内部使用SVG图像:在伪元素之前

时间:2018-02-27 13:32:31

标签: html css svg sass

我有一个简单的SVG图像:

<svg width="auto" height="10px" 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 个答案:

答案 0 :(得分:4)

试试这个:

?- table(sample_table4,Data),get_table_values_cell([3,2],Data,CL).
Data = [[["11"], ["21"], ["31"], ["41"]], [["12"], ["22"], ["32"]],
[["13"], ["23"]], [["14"]]],
CL = ["32"].

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