至于为什么Firefox下面的SVG根本不可见，我感到很茫然。我没有看到开发工具中的任何问题，调整不同的值没有任何影响。任何帮助将不胜感激。
<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>
<clipPath id="cb61f87d-92e3-4956-b0ac-b85f54e2e619">
<rect x="651" y="352" width="64" height="64" fill="none"></rect>
</clipPath>
<clipPath id="652f7fcb-18a1-4608-9813-6592b340c183" transform="translate(-646 -347)">
<path d="M683,416a32,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" transform="translate(-646 -347)">
<path d="M683.5,413A28.5,28.5,0,1,0,655,384.5,28.5,28.5,0,0,0,683.5,413Z" fill="none" clip-path="url(#cb61f87d-92e3-4956-b0ac-b85f54e2e619)"
clip-rule="evenodd"></path>
</clipPath>
<clipPath id="60eff4e7-8ba1-4edf-ab4c-6ddd26ac9a96" transform="translate(-646 -347)">
<path d="M668,399.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.33ZM666.41,372c-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>
答案 0 :(得分：2)
问题在于你的clipPath 2-4参考路径1.现在，路径2-4是transform ed，这引发了路径1应该使用什么坐标的问题？变换前的原始坐标（约为650,350，如示例所示），或变换后的坐标（约为0,0）？
我不知道规范的内容，但Firefox认为它应该是后者。因此，如果您将第一个clipPath更改为..
<rect x="0" y="0" width="64" height="64" fill="none"></rect>
..它可以在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>
<clipPath id="652f7fcb-18a1-4608-9813-6592b340c183" transform="translate(-646 -347)">
<path d="M683,416a32,32,0,1,0-32-32,32,32,0,0,0,32,32Z" fill="none" />
</clipPath>
<clipPath id="694f7d6a-8be8-46f7-8cd1-9190b8d68dd7" transform="translate(-646 -347)">
<path d="M683.5,413A28.5,28.5,0,1,0,655,384.5,28.5,28.5,0,0,0,683.5,413Z" fill="none" />
</clipPath>
<clipPath id="60eff4e7-8ba1-4edf-ab4c-6ddd26ac9a96" transform="translate(-646 -347)">
<path d="M668,399.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.33ZM666.41,372c-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" />
</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>
答案 1 :(得分：2)
继@ Sphinxx的回答（你应该接受），你可以完全摆脱不必要的<clipPath>元素。
您是否使用Illustrator创建此图标？它产生了非常臃肿的SVG。
<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">
<title>icon_settings_green</title>
<g transform="translate(-646 -347)">
<path d="M683,416a32,32,0,1,0-32-32,32,32,0,0,0,32,32Z" fill="#afe6af"/>
<path d="M683.5,413A28.5,28.5,0,1,0,655,384.5,28.5,28.5,0,0,0,683.5,413Z" fill="#c2edc4"/>
<path d="M668,399.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.33ZM666.41,372c-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="#fff" />
</g>
</svg>