在 SVG 的剪辑路径中使用嵌入的 SVG

Question

尝试使用 SVG 为图像创建蒙版。蒙版由圆角矩形和右上角的尖端创建。

我只是在 SVG 中创建整个东西，但是我无法正确地剪裁蒙版的尖端。似乎您不能在剪辑路径元素中使用嵌入式 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>