SVGのクリップパス内に埋め込みSVGを使用

Question

SVGを使用して画像のマスクを作成しようとしています。マスクは丸い角の矩形から作成され、先端は右上隅に作成されます。

私はSVGだけで全体を作成していますが、マスクの先端を正しくクリップできません。 clip-path要素の中に埋め込みSVGを使用できないかのようですか？本当？これを実装する適切な方法は何ですか？

画像は矩形でのみクリップされます。ここで

は私のコードです -

<svg width="100%" height="210"> 
    <defs> 
    <clipPath id="mask"> 
      <rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/> 
      <svg viewBox="0 0 33.5 18" width="44px" y="-93" x="calc(100% - 62px)"> 
      <path fill="black" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/> 
      </svg> 
    </clipPath> 
    </defs> 
    <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)"/> 
</svg> 

そしてcodepenへのリンク - http://codepen.io/itayd/pen/VpXLZW

Answer 1

ソリューションDEFSのパス要素を定義し、クリップ経路内の要素を使用することでした。

<svg width="100%" height="210"> 
    <defs> 
     <path transform="translate(50%, 50%)" cx="100" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/> 
     <path id="tip" fill="green" d="M37.5,24.4C37.5,11,48.5,0,62,0H0v34h37.5V24.4z"/> 
    <clipPath id="mask"> 
      <rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/> 
      <use xlink:href="#tip" x="calc(100% - 68px)"/> 
    </clipPath> 
    </defs> 
    <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)"/> 
</svg>