Utilisation de SVG incorporé dans un clip-path d'un fichier SVG

Question

Création d'un masque pour une image à l'aide de SVG. Le masque est créé à partir d'un rectangle coins arrondis, et une pointe dans le coin supérieur droit.

Je crée le tout juste en SVG, mais je ne peux pas correctement couper la pointe du masque. Il semble que vous ne pouvez pas utiliser un SVG intégré dans l'élément clip-path? Est-ce vrai? Quelle est la bonne façon de mettre en œuvre cela?

L'image est uniquement délimitée par le rectangle.

Voici mon code -

<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> 

Et un lien vers la codepen - http://codepen.io/itayd/pen/VpXLZW

Answer 1

La solution a été de définir l'élément de chemin dans les defs, et utiliser un élément à l'intérieur du clipPath.

<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>