Rails 7.1中使用Helper方法渲染SVG不显示的问题求助

问题场景 #

在Rails 7.1中，直接在button_tag内嵌入SVG代码时，按钮能正常显示带图标的样式；但通过自定义Helper加载相同SVG文件时，浏览器检查显示HTML结构正常，SVG却无法视觉上显示，该问题在Firefox、Chrome、Safari中均存在。

正常工作的代码（直接嵌入SVG） #

<%= button_tag type: "submit", class: "inline-flex items-center justify-center gap-x-2 rounded-md bg-black px-3.5 py-2.5 w-full sm:w-min text-sm font-semibold text-zinc-200 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black" do %>
  <span class="first-letter:capitalize"><%= t("save") %></span>
  <svg class="h-6 w-6" viewBox="0 0 24 24" stroke-width="1.5" fill="currentColor">
    <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
  </svg>
<% end %>

使用自定义Helper的代码（SVG不显示） #

<%= button_tag type: "submit", class: "inline-flex items-center justify-center gap-x-2 rounded-md bg-black px-3.5 py-2.5 w-full sm:w-min text-sm font-semibold text-zinc-200 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black" do %>
  <span class="first-letter:capitalize"><%= t("save") %></span>
  <%= svg "check-circle-solid" %>
<% end %>

自定义Helper代码 #

module ApplicationHelper
  def svg(name)
    file = Rails.root.join("app", "assets", "images", "#{name}.svg")
    File.read(file).html_safe
  end
end

原因及解决方法 #

核心原因 #

直接嵌入的SVG标签包含关键样式和渲染属性：class="h-6 w-6"（定义尺寸）、viewBox="0 0 24 24"（确保SVG正确缩放）、fill="currentColor"（继承按钮文字颜色）；而通过Helper加载的check-circle-solid.svg文件中，大概率缺少这些属性，导致SVG要么尺寸为0（视觉上不可见），要么颜色与按钮背景一致（无法区分）。

解决方法 #

方法1：修改SVG文件本身

打开app/assets/images/check-circle-solid.svg，在<svg>标签中添加必要属性，示例：

<svg class="h-6 w-6" viewBox="0 0 24 24" stroke-width="1.5" fill="currentColor">
  <!-- 原有path等内容 -->
</svg>

方法2：在Helper中动态注入属性

修改Helper代码，允许动态添加样式和渲染属性，无需修改原始SVG文件：

module ApplicationHelper
  def svg(name, class_name: "h-6 w-6", fill: "currentColor", viewBox: "0 0 24 24")
    file = Rails.root.join("app", "assets", "images", "#{name}.svg")
    svg_content = File.read(file)
    # 替换svg标签，注入指定属性
    svg_content.gsub(/^<svg/, %Q{<svg class="#{class_name}" fill="#{fill}" viewBox="#{viewBox}"})
               .html_safe
  end
end

调用时可根据需求自定义参数，或使用默认值：

<%= svg "check-circle-solid", class_name: "h-5 w-5", fill: "white" %>

验证步骤 #

1. 打开浏览器开发者工具，定位到SVG元素，检查其width、height值，若为0则需补充viewBox或宽高样式；
2. 检查SVG的fill属性，若与按钮背景色一致，需设置fill="currentColor"或指定其他颜色。

内容的提问来源于stack exchange，提问作者Sig