Question

我目前正在使用Compass内联数据助手将SVG嵌入到我的样式表中。我希望能够将base64输出的输出更改为更灵活的输出。

我希望能够定位fill，以便我可以使用变量更改为生成图像的颜色。

以下是当前生成的示例：

.test-svg {
    background-image:url(data:image/svg+xml;base64,.... etc....);
}

我希望输出类似于：

.test-svg {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="#00B1FF" width="100" height="100"/></svg>');
}

像这样输出它可以让我做类似以下的事情：

$new-color: #ff0000;

@mixin change-svg-color($color) {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="#{$color}" width="100" height="100"/></svg>');
}

.new-svg {
    @include change-svg-color($color);
}

环顾四周后，我发现了一些东西要添加到我的config.rb文件中，几乎可以找到我想要的东西。 https://github.com/Compass/compass/issues/1460建议在config.rb文件中添加以下内容：

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

但这似乎并没有给我我想要的东西：

.test-svg {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Crect%20fill%3D%22%2300B1FF%22%20width%3D%22100%22%20height%3D%22100%22%2F%3E%3C%2Fsvg%3E');
}

我可以在配置文件中添加任何内容以输出它我喜欢的方式吗？

非常感谢任何帮助。

从Compass内联数据助手更改SVG输出

0 个答案: