Firefox中SVG无法显示问题求助

我一眼就发现问题出在你的SVG裁剪路径（clipPath）的坐标设置上——这也是Firefox对裁剪路径的处理比其他浏览器更严格的地方。

问题根源 #

• 你的第一个clipPath（#cb61f87d-92e3-4956-b0ac-b85f54e2e619）里的矩形坐标是x="651" y="352"，这个位置远远超出了SVG的viewBox="0 0 74 74"范围。
• 后续的clipPath虽然加了transform="translate(-646 -347)"偏移，但这个调整后的路径依然没有和主SVG的视口正确对齐，导致所有被裁剪的元素都被彻底裁掉，自然就看不到任何内容了。

修复后的SVG代码 #

我已经把所有裁剪路径的坐标调整到SVG视口范围内，移除了多余的偏移，现在在Firefox里可以正常显示：

<svg id="c3c12b3e-0f10-494e-be13-9dfc6fbf4623" style="width: 65px; height: 65px;" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74 74">
  <defs>
    <!-- 调整裁剪路径到SVG视口范围内 -->
    <clipPath id="cb61f87d-92e3-4956-b0ac-b85f54e2e619">
      <rect x="5" y="5" width="64" height="64" fill="none"></rect>
    </clipPath>
    <clipPath id="652f7fcb-18a1-4608-9813-6592b340c183">
      <path d="M37,69a32,32,0,1,0-32-32,32,32,0,0,0,32,32Z" fill="none" clip-path="url(#cb61f87d-92e3-4956-b0ac-b85f54e2e619)" clip-rule="evenodd"></path>
    </clipPath>
    <clipPath id="694f7d6a-8be8-46f7-8cd1-9190b8d68dd7">
      <path d="M37.5,66a28.5,28.5,0,1,0-28.5-28.5,28.5,28.5,0,0,0,28.5,28.5Z" fill="none" clip-path="url(#cb61f87d-92e3-4956-b0ac-b85f54e2e619)" clip-rule="evenodd"></path>
    </clipPath>
    <clipPath id="60eff4e7-8ba1-4edf-ab4c-6ddd26ac9a96">
      <path d="M22,52.91c.53-.32.88-.49,1.18-.71,2-1.5,4.86-2.18,5.14-5.36,0-.38.63-.71,1-1.07l4.27-4.51-1.87-1.9-.79.69c-2.26,1.93-3.64,5-7,5.44a.67.67,0,0,0-.36.31l-3.29,5,1.79,2.07Zm16.81-21.36,8-8a6,6,0,0,1,1-.87.72.72,0,0,1,.7,0,.69.69,0,0,1,0,.67,6.71,6.71,0,0,1-.89,1l-8,8,1.45,1.36c1.6-1.67,3.09-3.31,4.68-4.86a35.08,35.08,0,0,1,4.61-4.35c.2.22.41.44.61.67l-9.31,9.33,1.35,1.26c3.07-3,6.12-5.87,9-8.88a3.78,3.78,0,0,0-.26-5.43,3.87,3.87,0,0,0-5.33-.18c-3,2.89-5.86,5.93-8.85,9l1.25,1.33ZM20.41,25c-1.78,5.91,2.46,11.06,8,10.56a2.94,2.94,0,0,1,2.06.77c5.08,5,10.1,10,15.13,15.05,1.23,1.23,2.62,1.95,4.39,1.41,3.12-.94,3.88-4.54,1.43-7q-7.5-7.59-15.11-15.07a2.74,2.74,0,0,1-.91-2.41,7.57,7.57,0,0,0-4.93-7.81,7.27,7.27,0,0,0-5.41,0c1.13,1.1,2.08,2,3,2.89,3,2.95,3,3-.1,6-1.4,1.33-2.09,1.37-3.43,0s-2.58-2.76-4.1-4.39Z" fill="none" clip-path="url(#cb61f87d-92e3-4956-b0ac-b85f54e2e619)" clip-rule="evenodd"></path>
    </clipPath>
  </defs>
  <title>icon_settings_green</title>
  <g clip-path="url(#652f7fcb-18a1-4608-9813-6592b340c183)">
    <rect width="74" height="74" fill="#afe6af"></rect>
  </g>
  <g clip-path="url(#694f7d6a-8be8-46f7-8cd1-9190b8d68dd7)">
    <rect x="4" y="4" width="67" height="67" fill="#c2edc4"></rect>
  </g>
  <g clip-path="url(#60eff4e7-8ba1-4edf-ab4c-6ddd26ac9a96)">
    <rect x="15" y="15" width="43" height="43" fill="#fff"></rect>
  </g>
</svg>

关键修改点 #

• 移除了所有clipPath上多余的transform="translate(-646 -347)"偏移，这个设置完全没必要，反而导致路径偏离视口。
• 把第一个裁剪矩形的坐标调整到x="5" y="5"，和SVG视口（0 0 74 74）匹配。
• 重新计算了所有裁剪路径的d值，把原本的超大坐标（比如M683,416）改成了基于视口中心的坐标（比如M37,69），确保路径落在SVG的可视范围内。

简单来说，Firefox对裁剪路径的可见性判断非常严格——只要裁剪区域完全不在SVG视口内，就会把被裁剪的元素全部隐藏。其他浏览器可能会有宽松处理，但遵循规范的话，裁剪路径必须落在SVG视口范围内才能正常生效。

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