Javascript 使用背景图像显示存储为数据URI的SVG：为什么属性值无效？

我将SVG文件作为数据URI存储在MySQL中。稍后，我想使用CSS

background image

属性再次将SVG显示为图像

这就是我如何生成数据URI（如下所示）

这是将SVG显示为图像的CSS（这是刀片模板语法，但正如我在dev工具中看到的，我的数据库中的字符串在括号之间正确呈现）：

edit：我在阅读注释后在下面的代码示例中添加了引号。它正在工作。

background-image: url("{!! $sentence['svg'] !!}")

这还不起作用，没有渲染任何内容。我将背景图像附加到的div为空。如果我将MySQL中的字符串粘贴到URL栏，SVG将正确显示

---

要将SVG显示为

背景图像

，我需要在JS代码和/或CSS中更改什么？

包含对

encodeURIComponent

的调用，您似乎缺少该调用。数据URI是URI，因此必须是有效的。典型的SVG代码包含许多字符，除非转义，否则这些字符无效或在URI中具有特殊意义。谢谢，我不知道我漏掉了答案中的一行。添加它时，我存储的字符串被更改（例如

变为

%3C%3Fxml%20version%3D%221.0%22%20standole%3D%22no%22%3F%3E“

），但我的问题仍然存在。”我还尝试在上面的svg变量前面加上

数据：image/svg+xml；charset=utf-8，

，这也没什么帮助。如果将整个字符串粘贴到URL栏，它将显示SVG。如果没有，在CSS中使用它也无法工作。还可以尝试在CSS

URL

函数中用引号括住URL。

data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22tree-svg%22%20viewBox%3D%220%200%20700%20500%22%3E%3Cg%20transform%3D%22translate(40%2C%2040)%22%3E%3Ctext%20class%3D%22node-text%22%20y%3D%2220%22%20x%3D%2223.192203521728516%22%20id%3D%22n0%22%3Eone%3Ctspan%20class%3D%22node-subscript%22%3E1%3C%2Ftspan%3E%3C%2Ftext%3E%3Cline%20x1%3D%2223.192203521728516%22%20y1%3D%2240%22%20stroke-width%3D%222%22%20id%3D%22n0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E

background-image: url("{!! $sentence['svg'] !!}")