Question

我有一个名为test.svg的文件，它位于与sass文件相同的文件夹中。

我想将它用作我的列表样式图像，如下所示：

list-style-image: url("data:image/svg+xml;<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'><text x='0' y='8'>x</text></svg>")

但是由于相同的sigtn等，这不会在浏览器中呈现。我想要包含外部文件中的图像。我试过了：

list-style-image: url("data:image/svg+xml;@import test.svg")
list-style-image: url("data:image/svg+xml;import(test.svg)")
list-style-image: url("data:image/svg+xml;inline-image(test.svg)")
list-style-image: url("data:image/svg+xml;image-uri(test.svg)")

如何做到这一点？（我正在和Koala一起编译）

Answer 1

Sass根本不提供任何阅读文件的功能，但是Compass可以。它就像将svg放在images目录（通过config.rb配置）并将路径传递给文件（相对于你配置的目录）到inline-image()函数一样简单：

body {
    background: inline-image('test.svg');
}

输出：

body {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc5JyBoZWlnaHQ9JzknIHZpZXdCb3g9JzAgMCA5IDknPjx0ZXh0IHg9JzAnIHk9JzgnPng8L3RleHQ+PC9zdmc+');
}

请记住，在base64编码之前，此函数不会尝试破坏SVG（删除空格等）。

Answer 2

使用 sass，您可能可以尝试诸如 node-sass-svg 套餐优惠之类的东西。它使您能够使用 node-sass 将外部 svg 文件内联到 css 中，顶部的樱桃实际上使您能够重新着色 svg。

li
  list-style-image: svg('test.svg', ("red": $color-brand))

使用SASS从文件内联SVG

2 个答案: