title: Is it possible to scope url(#id) attributes with SVG elements in a web page?
body: <p>In SVG, you can use a URL reference, such as <code>url(#id)</code>, to point to other SVG elements on a web page. For example:</p>
  
  <pre><code>&lt;use filter="url(#my-filter)" ...&gt;&lt;/use&gt;
  </code></pre>
  
  <p>But suppose that, by accident, I end up with a naming collision like this:</p>
  
  <pre><code>&lt;svg&gt;
    &lt;defs&gt;
      &lt;filter id="my-filter" x="30"&gt;
    &lt;/defs&gt;
    &lt;use filter="url(#my-filter)"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  
  &lt;!-- somewhere else on my page ---&gt;
  &lt;svg&gt;
    &lt;defs&gt;
      &lt;filter id="my-filter" x="40"&gt;
    &lt;/defs&gt;
    &lt;use filter="url(#my-filter)"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Unfortunately it seems that these <code>url()</code> references are not scoped. When this page displays, both of them will use the same filter -- presumably the first  element to match the selector <code>#my-filter</code> (as opposed to the <code>&lt;filter&gt;</code> located within the <code>&lt;svg&gt;</code> context of each).</p>
  
  <p>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?</p>