title: clipPath in multiple SVG tags
body: <p>Suppose you have multiple SVG tags where in each you define a different clip path with the same ID.</p>
  
  <pre><code>&lt;svg id="svg1" width="200" height="200"&gt;
      &lt;defs&gt;
          &lt;clipPath id="nodeclipper"&gt;
              &lt;rect width="100" height="100" x="0" y="0" /&gt;
          &lt;/clipPath&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  
  &lt;svg id="svg2" width="200" height="200"&gt;
      &lt;defs&gt;
          &lt;clipPath id="nodeclipper"&gt;
              &lt;circle cx="20" cy="0" r="40" /&gt;
          &lt;/clipPath&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I also made a <a href="http://jsfiddle.net/XwM6a/3/" rel="noreferrer">JSFiddle</a>. What is the expected behaviour? I thought that an element could only reference definitions inside its own SVG tag, but that doesn't seem to be the case:</p>
  
  <ul>
  <li>Chrome 26: Uses <code>circle</code> clip path two times.</li>
  <li>Firefox 17: Uses <code>rect</code> clip path two times.</li>
  <li>Safari 6: Renders one <code>rect</code> and one <code>circle</code> clip path as expected.</li>
  </ul>
  
  <p>It gets weird when you <a href="http://jsfiddle.net/XwM6a/4/" rel="noreferrer">hide one of the SVG tags</a> because Chrome and Safari then drop the <code>clip-path</code> entirely.</p>
  
  <p>I know it works when the <code>clipPath</code>s have different IDs but is it supposed to be that way? As far as I see the <a href="http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath" rel="noreferrer">spec</a> doesn't contain information about the issue.</p>