Shopify Liquid中Case语句SVG内容无法加载问题求助

• Case语句变量匹配不严格
  虽然SVG的class能正确渲染，说明icon变量已正常传递，但要确认变量的大小写、空格、特殊字符是否和case分支完全匹配。比如菜单标题是"Home"，生成的icon变量是"home"，但case分支写的是when 'Home'，就会匹配失败。
  排查：在调用render 'icon'的位置添加{{ icon | inspect }}，输出变量实际值后和icon.liquid里的case分支逐一比对。
  解决：统一变量和分支格式，比如将变量转成小写处理：{% assign icon = menu_title | downcase | strip %}，case分支也用小写值，如when 'home'。

• SVG代码本身存在语法错误
  即便匹配到了对应case分支，如果SVG有标签未闭合、属性格式错误（比如fill=#000未加引号）等问题，浏览器会解析失败导致图形不显示。
  排查：把对应分支的SVG代码复制到单独HTML文件中直接打开，验证是否能正常渲染。
  解决：修正SVG语法错误，确保所有标签闭合、属性书写规范。

• Liquid case语句结构错误
  检查icon.liquid里的case语句是否完整，比如有没有遗漏{% endcase %}，或者某个when分支后没有对应的SVG代码。
  示例错误写法：

  {% case icon %}
    {% when 'home' %}
      <svg>...</svg>
    {% when 'shop' %}
  {% endcase %}
  

  解决：保证每个when分支都有完整的SVG代码，且case语句首尾闭合。

• CSS样式隐藏了SVG
  虽然class正确，但可能CSS对该class设置了display: none、visibility: hidden或opacity: 0，导致SVG不可见；也可能未设置SVG的宽高，导致图形显示为0尺寸。
  排查：用浏览器开发者工具（F12）选中SVG元素，查看“样式”面板的相关属性。
  解决：移除隐藏类的相关样式，添加明确的宽高设置，比如width: 20px; height: 20px;。

• 变量生成逻辑存在偏差
  处理菜单标题生成icon变量时，过滤规则可能导致值和预期不符。比如菜单标题是"New Arrivals"，处理时错误替换了部分字符，导致变量变成"newarrival"，但case分支是when 'new-arrivals'。
  排查：在变量生成位置添加{{ menu_title | inspect }}和{{ icon | inspect }}，对比原始标题和处理后的变量值。
  解决：调整过滤逻辑，比如将空格替换为连字符：{% assign icon = menu_title | downcase | replace: ' ', '-' %}，对应case分支也使用when 'new-arrivals'。

内容的提问来源于stack exchange，提问作者Anake.me