title: invert SVG clip (show only outside path)
body: <p>Is it possible to invert the action of a clip with SVG? I'd like to show the path between the two circles rather than inside the circles:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="50%" height="50%" viewbox="0 0 985 740" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;g&gt;
       &lt;clipPath id="re8-clip" clip-rule="nonzero"&gt;
          &lt;rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/&gt;
          &lt;rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/&gt;
       &lt;/clipPath&gt;
       &lt;rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/&gt;
       &lt;rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/&gt;
    &lt;/g&gt;
    &lt;path stroke="Black" stroke-width="1.5" fill="none" d="M 798.0 189.0 551.0 140.0" clip-path="url(#re8-clip)"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>