Javascript SVG：不同SVG中存在多个掩码的问题

我在使用svg过滤器和掩码时遇到了一个奇怪的问题

假设我有一个svg文件，其中包含以下过滤器和掩码：

<filter id="om-outline">
<feMorphology result="offset" in="SourceGraphic" operator="dilate" radius="3"/>
<feComposite in="offset" in2="SourceGraphic" operator="out" result="stroke" />
<feFlood flood-color="#79868d" result="COLOR-red-2" />
<feComposite in="COLOR-red-2" in2="stroke" operator="in" result="BEVEL_41" />
</filter>

<mask id="outline-mask">
<rect cx="0" cy="0" width="341" height="375" fill="black"/>
<!-- some more elements here that create the silhouette of my actual svg graphic -->
</mask>

使用此过滤器和遮罩，在正在设置动画的svg图形周围创建一个漂亮的轮廓

到目前为止，一切都按预期进行，但当我添加另一个图形，使用相同的技术创建轮廓时，会发生以下情况：

不知何故，第二个图形使用了第一个图形的遮罩和轮廓，尽管我使用了不同的ID作为参考

---

这只发生在Firefox和Internet Explorer中，Safari和Chrome似乎可以正常工作。

文档中是否有多个具有相同id的元素。如果是这样，您的文档是invalid@RobertLongson如前所述，我使用了不同的ID创建一个并将其包含在问题中。@RobertLongson，好的，等等，我将为此设置一个小代码笔。@RobertLongson，好的，我试图在codepen中重建此问题，但我发现这只是一个巨大的问题……您的文档中是否有多个具有相同id的元素。如果是这样，您的文档是invalid@RobertLongson如前所述，我使用了不同的ID创建了一个并将其包含在问题中。@RobertLongson，好的，等等，我将为此设置一个小代码笔。@RobertLongson，好的，我尝试在代码笔中重建此问题，我发现这只是一个巨大的问题。。。