在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中定义path元素，并在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>