Question

我有一个SVG文件，我希望通过我的Rails应用程序中的JavaScript动态加载内联。我需要内联加载SVG，以便我可以将CSS fill属性应用于它。

我宁愿不通过AJAX加载SVG文件，以避免在SVG可见之前出现潜在的延迟。

理想情况下，我想要告诉Rails，在我的app/assets/icons/目录中，我有图标calendar.svg和phone.svg，并且Rails（Sprockets？）应该采取这些SVG文件的内容并将它们设置为JavaScript对象SVG中的字符串值，以便我可以在我的JavaScript代码中访问它们，如下所示：

var view = {
  render: function () {
    this.element.innerHTML = SVG['app/assets/icons/calendar.svg'];
  }
};

优选地，该解决方案被推广到不仅仅是SVG，并且我可能通过JS以文本格式加载任何数据，例如， TEXT['app/assets/icons/calendar.svg']甚至TEXT['app/assets/etc/some-text-file.text']。

在Rails中有没有办法做到这一点？

Answer 1

我们最终为此编写了一个链轮变换器：https://github.com/cloversites/js-text-rails

$ bundle install js-text-rails

需要您的文件，例如在app/assets/javascripts/application.js:

//= require_tree ../images/icons

app/assets/images/icons包含文件envelope.svg。

应用程序JavaScript代码中的任何位置，通过全局SVG变量访问文本文件内容：

var envelopeIcon = SVG['icons/envelope'];
// Do something with `envelopeIcon`...

在Rails中将文本文件内容加载到JavaScript中

1 个答案: