I came across a strange problem using svg filter and masks.
Let's say I have an svg file containg these filters and masks:
<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>
using this filter and mask, creates a nice outline arround my animating svg graphic
everything is working as expected so far now, but when I add another graphic, using the same technic to create an outline, this happens:
somehow the second graphic uses the mask and outline of the first graphic, even though I used different ids for the reference.
This only happens in Firefox and Internet Explorer, Safari and Chrome seem to work as expected.