Question

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

我只是在SVG中创建了整个东西，但是我无法正确地剪切蒙版的尖端。好像你不能在clip-path元素中使用嵌入式SVG？真的吗？什么是正确的方法来实现这个？

图像仅被矩形剪裁。

这是我的代码 -

<p id="t1"></p>

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

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

1 个答案: