title: clip path selection Chrome vs. Firefox
body: <p>The below selector will not find <code>&lt;clipPath&gt;</code> elements inside <code>&lt;defs&gt;</code> on Chrome (38):</p>
  
  <pre><code>d3.selectAll('defs clipPath')
  </code></pre>
  
  <p>(This is D3.js code but I suspect underlying <code>querySelectorAll</code> issue)</p>
  
  <p>It works fine on Firefox. Is there a different selector syntax to use that will work on both browsers?</p>
  
  <p>In the example below on Firefox you will see the whole text because the clip path is removed. But on Chrome it will be cut off after 85 pixels because the clip path is not removed.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>d3.selectAll('defs clipPath').remove();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  
  &lt;svg height="200" width="400"&gt;
    &lt;defs&gt;
      &lt;clipPath id="clip1"&gt;
        &lt;rect id='tt' x="0" y="0" width="85" height="15"&gt;&lt;/rect&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
    &lt;text clip-path="url(#clip1)" x="0" y="15"&gt;This text should all be visible once we remove the clip-path&lt;/text&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>