svg - 使用 SASS 从文件内联 SVG

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>")

但是由于 equal-signn 等原因，这不会在浏览器中呈现。我想包含外部文件中的图像。我试过了:

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)")

如何才能做到这一点？ (我正在用考拉编译)

Answer 1

Sass 根本不提供任何读取文件的功能，但 Compass 提供。就像将 svg 放在图像目录(通过 config.rb 配置)并将文件路径(相对于您配置的目录)传递到 inline-image() 一样简单。功能:

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

输出:

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

请记住，在对 SVG 进行 base64 编码之前，此函数不会尝试破坏 SVG(删除空格等)。