In SVG, you can use a URL reference, such as url(#id), to point to other SVG elements on a web page. For example:
<use filter="url(#my-filter)" ...></use>
But suppose that, by accident, I end up with a naming collision like this:
<svg>
<defs>
<filter id="my-filter" x="30">
</defs>
<use filter="url(#my-filter)"></use>
</svg>
<!-- somewhere else on my page --->
<svg>
<defs>
<filter id="my-filter" x="40">
</defs>
<use filter="url(#my-filter)"></use>
</svg>
Unfortunately it seems that these url() references are not scoped. When this page displays, both of them will use the same filter -- presumably the first element to match the selector #my-filter (as opposed to the <filter> located within the <svg> context of each).
Is there some way to add scoping so that each reference points to the intended place? Or do I just have to make sure that these ids are always globally unique on my web page?