css - mozilla firefox 不支持svg做背景图

问题描述

问 题

这是使用svg做背景图时在mozilla firefox下没有效果，点击出现这样的错误。
以下是svg的使用，除了mozilla firefox看不到效果，其他浏览器都看到效果

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="0,0 100,10 100,80 0,90" style="fill:#ccc;opacity:.5" /></svg>');

为什么在mozilla firefox出现XML解释的错误，提示说未有结束的标志，但是代码部分已经加了svg结束标志了

解决方案

将 svg 内容用 encodeURIComponent 一下，

background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20points%3D%220%2C0%20100%2C10%20100%2C80%200%2C90%22%20style%3D%22fill%3A%23ccc%3Bopacity%3A.5%22%20%2F%3E%3C%2Fsvg%3E')

see https://stackoverflow.com/a/3...

这篇关于css - mozilla firefox 不支持svg做背景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！