可以在CSS中使用内联SVG定义吗?
我的意思是这样的:
.my-class {
background-image: <svg>...</svg>;
}
发布于 2015-03-05 06:11:30
在Mac/Linux上,您可以使用以下简单的bash命令轻松地将SVG文件转换为CSS背景属性的base64编码值:
echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"
在Mac上测试。这样也可以避免URL转义的混乱。
请记住,对SVG文件进行base64编码会增加其大小,请参阅css-tricks.com blog post。
发布于 2020-08-05 18:50:56
我的解决方案是https://yoksel.github.io/url-encoder/,你只需插入你的svg,然后得到背景图像代码
发布于 2016-02-04 22:57:01
我已经派生了一个CodePen演示,它在将内联SVG嵌入到CSS时遇到了同样的问题。使用SCSS的一个解决方案是构建一个简单的url编码函数。
字符串替换函数可以从内置的字符串切片、字符串索引函数创建(多亏了Hugo Giraudel,请参阅css-tricks )。
然后,只需将%
、<
、>
、"
、'
替换为%xx
代码:
@function svg-inline($string){
$result: str-replace($string, "<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
$result: str-replace($result, '%', '%25');
$result: str-replace($result, '"', '%22');
$result: str-replace($result, "'", '%27');
$result: str-replace($result, ' ', '%20');
$result: str-replace($result, '<', '%3C');
$result: str-replace($result, '>', '%3E');
@return "data:image/svg+xml;utf8," + $result;
}
$mySVG: svg-inline("<svg>...</svg>");
html {
height: 100vh;
background: url($mySVG) 50% no-repeat;
}
Compass中还提供了一个image-inline
辅助函数,但由于CodePen中不支持该函数,因此此解决方案可能会有用。
CodePen上的演示:http://codepen.io/terabaud/details/PZdaJo/
https://stackoverflow.com/questions/10768451
复制相似问题