为首个SVG设置visibility:hidden后相邻SVG同时消失的原因

这个现象是ID全局冲突和SVG渲染规则共同导致的：

• 首先HTML标准明确要求页面中所有id属性值必须全局唯一，当存在多个同名ID元素时，SVG里用url(#xxx)引用资源时，只会匹配DOM里最先出现的那个对应ID的元素。你提供的代码里两个SVG的<defs>块中都定义了id="clip0"的裁剪路径，所以第二个SVG里写的clip-path="url(#clip0)"，根本不会引用自己内部的裁剪路径，而是找到第一个SVG里的那个同名clip0。
• 当你给第一个SVG设置visibility: hidden后，渲染引擎不会计算这个隐藏元素子树内的可复用渲染资源（包括裁剪路径、渐变、滤镜、遮罩这类定义在<defs>里的SVG资源），相当于第二个SVG引用的裁剪路径是个无效的空资源。
• 按照SVG的渲染规则，一旦图形元素引用的裁剪路径无效，这个元素会直接被跳过不绘制，所以第二个SVG里的白色叉号完全不显示，看起来就像两个SVG一起消失了。

• 最彻底的解决方式是保证所有SVG资源ID全局唯一，不要在多个SVG里复用相同的ID名，比如给两个裁剪路径分别命名为clip_close_1、clip_close_2，同步修改对应<g>标签上的clip-path属性即可。
• 如果第一个SVG本身就是不需要展示的冗余内容，直接删除该节点就能同时解决ID冲突和无效引用问题。

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