Question

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

有没有办法将模板化的SVG添加到资产管道并从SCSS引用它，以便SVG可以像我的其余资产一样预编译为静态资产？

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为资产管道注册了haml引擎：

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

然后，这很好用：

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

使用Rails Asset Pipeline渲染SVG HAML模板

1 个答案: