Question

我有一个svg作为背景图像，我希望能够根据需要更新颜色，所以我创建了一个scss mixin

@mixin backgroundTick($color) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="none" fill-rule="evenodd" stroke="#{$color}" stroke-width="2" d="M.688 6.299l4.5 3.6L11 2"/></svg>');
}

例如结果可以我

data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="none" fill-rule="evenodd" stroke="#000" stroke-width="2" d="M.688 6.299l4.5 3.6L11 2"/></svg>

但是什么也没有显示，请参见以下示例https://jsfiddle.net/96emhq4v/

但是如果我要创建一个包含

的svg文件

<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="none" fill-rule="evenodd" stroke="#000" stroke-width="2" d="M.688 6.299l4.5 3.6L11 2"/></svg>

没问题

Answer 1

您需要先对SVG进行编码，然后将其用作背景图像

这是您刚刚用黑色填充的SVG代码

<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="#000000" fill-rule="evenodd" stroke="#000" stroke-width="2" d="M.688 6.299l4.5 3.6L11 2"/></svg>

这是SVG的编码版本，您可以在此处URL-encoder for SVG

轻松进行编码

%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath fill='%23000000' fill-rule='evenodd' stroke='%23000' stroke-width='2' d='M.688 6.299l4.5 3.6L11 2'/%3E%3C/svg%3E

现在您可以用作背景图像

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath fill='%23000000' fill-rule='evenodd' stroke='%23000' stroke-width='2' d='M.688 6.299l4.5 3.6L11 2'/%3E%3C/svg%3E");

Answer 2

我建议不要使用背景图片。相反，您可以添加SVG并将其绝对定位到要使其成为背景的div上。如果将left，top，right，bottom设置为0，则尺寸应相同。调整z-index并为元素提供一个类，使用css fill，stroke然后可以更改颜色。如果将其作为图像导入，将无法使用。很棒的事情是svg具有很好的可伸缩性，并且不会出现像素问题。

SVG SA背景图片数据：图片未显示

2 个答案: