ruby-on-rails - 使用 Rails Asset Pipeline 渲染 SVG HAML 模板

Question

我有一个使用 HAML 创建的 SVG 以保持语法清晰。我可以使用 Rails 路由将图像用作 CSS 中的背景图像，但我真的很想将 svg.haml 预编译为 svg 并静态提供它。

有没有一种方法可以将模板化 SVG 添加到 Assets 管道并从 SCSS 中引用它，这样 SVG 就可以像我的其他 Assets 一样被预编译为具有摘要的静态 Assets ？

Answer 1

所以，这是我在 app/assets/images 中的一个 SVG 示例 (seal.svg.haml):

points = 60; interval = 360.0 / points

%svg{xmlns: 'http://www.w3.org/2000/svg', 'xmlns:xlink' => 'http://www.w3.org/1999/xlink', 'xmlns:svg' => 'http://www.w3.org/2000/svg', viewBox: '0 0 200 200'}
  %defs
    %polygon#point{points: '100,0 104,8 96,8'}

  %g{fill: '#333'}
    %circle{cx: 100, cy: 100, r: 88, stroke: '#333', 'stroke-width' => 2, fill: 'transparent'}

    - points.times do |point|
      %use{'xlink:href' => '#point', 'transform' => "rotate(#{interval * point} 100 100)"}

然后，我使用 config/initializers/haml_assets.rb 为 Assets 管道注册了 haml 引擎:

Rails.application.assets.register_engine '.haml', Tilt::HamlTemplate

然后，这工作正常:

.seal {
  background: transparent url(asset_path('seal.svg')) no-repeat center top;
}