SVG插入页面显示黑色块：是clip-rule问题还是Liquid模板栈问题？

问题 #

从Figma导出用于网站支付页的Visa标志SVG，在WebStorm预览中颜色显示正常，但插入Liquid模板页面后，所有导出的SVG均显示为黑色块。请问这是clip-rule的问题，还是网站技术栈（Liquid模板）的问题？

导出的SVG代码：

<svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="1.14893" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
    <path d="M15.9156 15.8276H13.8094L15.1267 8.19705H17.2328L15.9156 15.8276Z" fill="#172B85"/>
    <path d="M23.5506 8.38358C23.1351 8.22918 22.4762 8.05872 21.6615 8.05872C19.5816 8.05872 18.1169 9.09771 18.1079 10.5832C18.0906 11.6791 19.1566 12.2878 19.9538 12.6533C20.7687 13.0267 21.0457 13.2704 21.0457 13.6033C21.0374 14.1144 20.3872 14.3501 19.7808 14.3501C18.9399 14.3501 18.4894 14.2286 17.8047 13.9442L17.5273 13.8223L17.2326 15.5352C17.7266 15.746 18.6367 15.9331 19.5816 15.9413C21.7915 15.9413 23.2303 14.9183 23.2473 13.3354C23.2557 12.4667 22.6929 11.8011 21.4794 11.2573C20.7427 10.9081 20.2916 10.6727 20.2916 10.3155C20.3003 9.99073 20.6732 9.6581 21.5047 9.6581C22.1894 9.64181 22.6925 9.79598 23.0736 9.95027L23.2641 10.0313L23.5506 8.38358Z" fill="#172B85"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M27.3205 8.19705H28.9497L30.6488 15.8274H28.6987C28.6987 15.8274 28.5079 14.9507 28.4474 14.6828H25.7432C25.665 14.8857 25.3012 15.8274 25.3012 15.8274H23.0912L26.2197 8.83016C26.4365 8.33494 26.8182 8.19705 27.3205 8.19705ZM27.1908 10.9894C27.1908 10.9894 26.5234 12.686 26.3499 13.1244H28.1006C28.0139 12.7429 27.6151 10.9164 27.6151 10.9164L27.4679 10.2589C27.4059 10.4282 27.3163 10.6609 27.2558 10.8179C27.2148 10.9244 27.1873 10.996 27.1908 10.9894Z" fill="#172B85"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.98757 13.4003L12.0502 8.19705H14.2773L10.9668 15.8195H8.73955L6.86231 9.18924C6.21461 8.83451 5.4754 8.54922 4.64893 8.35124L4.68359 8.19706H8.07223C8.53154 8.21314 8.90425 8.35113 9.02552 8.83848L9.76196 12.3444C9.76203 12.3446 9.7621 12.3448 9.76217 12.345L9.98757 13.4003Z" fill="#172B85"/>
    <rect x="1.14893" y="0.5" width="33" height="23" rx="3.5" stroke="#E5E5E5"/>
</svg>

预期显示效果：
实际显示效果：

分析与解决 #

这既不是clip-rule的问题，也不是Liquid模板本身的问题，核心原因是网站全局CSS对SVG元素设置了强制填充样式。

• 常见触发场景：网站存在类似的全局样式规则，会覆盖SVG内部定义的fill属性，导致所有填充色被替换为黑色：

  svg { fill: currentColor; }
  /* 或者 */
  svg { fill: #000; }
  

• 三种可行的解决方法：

  1. 给SVG添加内联样式强制优先级：
     在<svg>标签中加入style="fill: unset !important;"，确保内部填充样式生效。修改后的SVG开头示例：

     <svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill: unset !important;">
     

  2. 为SVG添加自定义类名，通过CSS重置填充：
     先在全局CSS中添加规则：

     .payment-logo svg { fill: unset; }
     

     再用这个类包裹SVG：

     <div class="payment-logo">
       <!-- 你的SVG代码 -->
     </div>
     

  3. 调整全局SVG样式：如果全局的svg { fill: ... }规则非必要，可直接修改或移除该规则。

另外，clip-rule不存在问题——WebStorm预览正常已经证明了这一点，你也可以把SVG单独放入空白HTML文件测试，确认显示正常。

内容的提问来源于Stack Exchange，提问作者rovac