title: SVG clipPath to clip the *outer* content out
body: <p>Normally, the <code>&lt;clipPath&gt;</code> element hides everything that is outshide the clip path. To achieve the opposite effect - that is to "cut out" something from the image - i want to use two paths in the clipPath and the <code>clip-rule="evenodd"</code> attribute. Basically, I want to "xor" the clip paths.</p>
  
  <p>But it doesn't work. It shows the region "ORed": </p>
  
  <pre><code>&lt;clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox"&gt;
          &lt;rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" /&gt;
          &lt;rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" /&gt;
      &lt;/clipPath&gt;     
  
   &lt;rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p><em>My problem is that AFAIK <code>&lt;mask&gt;</code> doesn't work in iOS WebKit.</em></p>