背景图像中的 SVG答案

【问题标题】：SVG in background-image背景图像中的 SVG
【发布时间】：2017-10-06 08:12:04
【问题描述】：

我有这个 SASS：

.menu-inner .item-block .item-inner{
    border: none;
    background-image: url(data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…20'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23fff'/></svg>);
}

但它不起作用，我不断收到错误消息。 expected a variable name (e.g. $x) or ')' for the parameter list for url

我错过了什么？

【问题讨论】：

您的实际 SASS 中是否有那些 URL 编码字符 (%20) 和 UTF8 字符 (…)？还是复制+粘贴错误？
编码没有任何复制粘贴错误。
你能试试这样的背景图片吗：url("data:image/svg+xml;charset=utf-8,");

标签： css svg sass

【解决方案1】：

SASS 正在尝试将您的 SVG 解释为 CSS/SASS。您应该在 url 参数周围加上引号。由于 SVG 源代码中有单引号，因此请在参数周围使用双引号。

.menu-inner .item-block .item-inner{
    border: none;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…20'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23fff'/></svg>");
}

顺便说一句，您的 SVG 中的 … 字符似乎不合适。

【讨论】：