[英]Inline SVG in CSS doesn't work
I use inline-SVG in CSS file to fill background for a div. 我在CSS文件中使用inline-SVG填充div的背景。 But it didn't work. 但这没有用。 I test my SVG code is good. 我测试了我的SVG代码是否正确。 You can test by copy svg code to this https://www.rapidtables.com/web/tools/svg-viewer-editor.html 您可以通过将svg代码复制到此https://www.rapidtables.com/web/tools/svg-viewer-editor.html进行测试
#bgr{ width:500px; height:500px; background:url('data:image/svg+xml;utf8,<svg width="500" height="500"><path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4" style="fill:red;"/></svg>'); }
<div id="bgr"></div>
You need to set xmlns="http://www.w3.org/2000/svg"
. 您需要设置xmlns="http://www.w3.org/2000/svg"
。 You may find more information here : 您可以在这里找到更多信息:
#bgr{ width:500px; height:500px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4" style="fill:red;"/></svg>'); }
<div id="bgr"></div>
You can convert it to base64 img, there're a bunch of online tools that can do it, this por example: 您可以将其转换为base64 img,有很多在线工具可以做到这一点,此por示例:
#bgr{ width:500px; height:500px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMTAwIiB2ZXJzaW9uPSIxLjEiPiAgIDxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTAwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjYiIGZpbGw9ImdyZWVuIi8+PC9zdmc+); ); }
<div id="bgr"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.