在同一HTML中内联同一SVG的两个稍微修改过的版本。通过使用display: none;和其他模式，如display: flex;或display: block;等，将它们配置为出现在不同的情况下。
请注意，只有首先添加到标记中的一个标记才会正确运行。
请在此处查看该问题的演示：https://codepen.io/sbnc_eu/pen/GRZwaaM
(注意：这不是实现这种悬停效果的最有效方法，但它只是为了演示而创建的，从更复杂的问题中简化而来。(
问题是，当SVG被添加到HTML内联中时，在中定义的ID会变成在HTML上下文中定义的IDs。因此，如果在不更改ID的情况下内联两个稍微修改过的版本，则添加的第一个版本将采用HTML上下文中的给定ID，而引用相同ID的任何其他内联SVG都将引用具有该ID的第一个元素。
这可能会造成问题，尤其是掩码，因为掩码通常由SVG中的ID引用。
即使SVG多次内联在HTML中，只要它们在同一ID下使用相同的掩码，问题也可能不明显。所产生的HTML在技术上是无效的(由于ID重复(，但SVG可能看起来很好。然而，如果由于任何原因使包含具有给定ID的掩码的第一个SVG不可见(例如，使用display: none;(，则掩码将变得不正常。
故事的寓意：在内联SVG(或任何其他标记(时，始终确保元素在生成的HTML的上下文中具有唯一的ID，而不仅仅是在内联元素内部。