如何在 Rails sprockets 资产助手中使用 svg 'use' 语句？答案

【问题标题】：How to use svg 'use' statement with Rails sprockets asset helpers?如何在 Rails sprockets 资产助手中使用 svg 'use' 语句？
【发布时间】：2016-09-08 21:41:43
【问题描述】：

我在外部文件中有一个 svg，我想在 Rails 中使用 use 语句来引用它。

如果我这样做：

%svg
  %use{"xlink:href" => "assets/icon.svg#test"}

生成html：

<svg>
  <use xlink:href="assets/icon.svg#test"></use>
</svg>

一切都按预期进行。

但是我希望它能够以与 image_tag 的工作方式类似的方式与 sprockets 资产版本控制一起使用。

我尝试过：

%svg
  %use{"xlink:href" => image_url("icon.svg#test")}

这会生成 html：

<svg>
  <use xlink:href="http://0.0.0.0:5000/assets/icon.svg#test"></use>
</svg>

资产确实存在于http://0.0.0.0:5000/assets/icon.svg，但图标未显示。

我做错了什么？如何将 sprockets 资产助手与 svg use 语句一起使用？

【问题讨论】：

您使用的是什么 UA。这适用于 Firefox，但有些 UA 不支持外部 <use>。

标签： ruby-on-rails svg sprockets

【解决方案1】：

asset不能存在于0.0.0.0，不是真实ip，需要设置config.action_controller.asset_host

开发中127.0.0.1(loopback ip) 可以

【讨论】：

asset_host设置为127.0.0.1问题依旧存在

【解决方案2】：

似乎是跨源浏览器安全问题。

谷歌浏览器实际上给出了一条有助于解决此问题的消息。（我之前用的是firefox所以没注意到这个……）

不安全地尝试从 URL http://localhost:5000/ 的框架加载 URL http://0.0.0.0:5000/assets/icon.svg。域、协议和端口必须匹配。

域名非常匹配才能正常工作。

【讨论】：

【解决方案3】：

在我看来，这可以通过使用 image_path 而不是 image_url 来解决。这样，您应该获得 SVG 文件的相对链接，即与原始 HTML 中的输出完全相同，可能只是将资产哈希添加到文件名中。

【讨论】：