title: Using embedded SVG inside a clip-path of an SVG
body: <p>Trying to create a mask for an image using SVG. The mask is created out of a rounded corners rect, and a tip at the upper right corner. </p>
  
  <p>I'm creating the entire thing just in SVG, but the I can't properly clip the tip of the mask. It seems as if you can't use an embedded SVG inside the clip-path element? Is that true? Whats the proper way to implement this than?</p>
  
  <p>The image gets clipped only by the rectangle.</p>
  
  <p>Here is my code - </p>
  
  <pre><code>&lt;svg width="100%" height="210"&gt;
    &lt;defs&gt;
      &lt;clipPath id="mask"&gt;
            &lt;rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/&gt;
            &lt;svg viewBox="0 0 33.5 18" width="44px" y="-93" x="calc(100% - 62px)"&gt;
              &lt;path fill="black" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/&gt;
            &lt;/svg&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
    &lt;image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
           x="0"
           y="0"
           width="100%"
           preserveAspectRatio="none"
           clip-path="url(#mask)"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And a link to the codepen - <a href="http://codepen.io/itayd/pen/VpXLZW" rel="nofollow noreferrer">http://codepen.io/itayd/pen/VpXLZW</a></p>