Question

我在Angular6项目中使用了以下CSS。

.bg
{
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'28\' height=\'49\' viewBox=\'0 0 28 49\'%3E%3Cg fill-rule=\'evenodd\'%3E%3Cg id=\'hexagons\' fill=\'%23ff6576\' fill-opacity=\'1\' fill-rule=\'nonzero\'%3E%3Cpath d=\'\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

当我尝试构建项目时，它引发以下错误：

Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: Can't resolve '%27data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=/%27http://www.w3.org/2000/svg/%27%20fill=/%27%23fff/%27%20viewBox=/%270%200%208%208/%27%3E%3Cpath%20d...

有人可以帮忙吗？预先感谢。

解决方案（来自@Mathias）：

.bg
{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff6576' fill-opacity='1' fill-rule='nonzero'%3E%3Cpath d=''/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

Answer 1

外部使用双引号，内部使用单引号

Answer 2

您可以尝试在外部使用双引号，在内部使用双引号

.bg
{
    background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'28\' height=\'49\' viewBox=\'0 0 28 49\'%3E%3Cg fill-rule=\'evenodd\'%3E%3Cg id=\'hexagons\' fill=\'%23ff6576\' fill-opacity=\'1\' fill-rule=\'nonzero\'%3E%3Cpath d=\'\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

如何在Angular6的CSS中使用内联svg

2 个答案: