Question

有一个过滤器

<filter id="filter">
 <feGaussianBlur stdDeviation="4">
 <feColorMatrix type="matrix" values="">
</filter>

应用于图片

<image filter="url('#filter')">

我有一定的形状：

<polygon points="">

如何将多边形用作未应用滤镜的蒙版？

Answer 1

在同一位置使用两个<image>元素。

第一张图片会有一个过滤器（就像你现在拥有的那样）。
第二张图片没有过滤器，而是会有一个剪辑。
第二张图片使用的clipPath需要将多边形作为其内容。

如果您真的想要一个图像，可以使用画布drawImage合并图像，然后将合成图像写入新的<image>元素。

Answer 2

您还可以将滤镜应用于多边形，然后使用feImage将图像导入滤镜。在＆＃34;中使用feComposite＆＃34;将做掩蔽。

<svg height="210" width="500">
  <defs>
  <filter id="cutout" x="-300%" y="-300%" height="700%" width="700%">
    <feImage result="photo" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/%D0%9D%D1%96%D0%B6%D0%BD%D0%B8%D0%B9_%D1%80%D0%B0%D0%BD%D0%BA%D0%BE%D0%B2%D0%B8%D0%B9_%D1%81%D0%B2%D1%96%D1%82%D0%BB%D0%BE.jpg/1280px-%D0%9D%D1%96%D0%B6%D0%BD%D0%B8%D0%B9_%D1%80%D0%B0%D0%BD%D0%BA%D0%BE%D0%B2%D0%B8%D0%B9_%D1%81%D0%B2%D1%96%D1%82%D0%BB%D0%BE.jpg" preserveAspectRatio="xMidYMid meet"/>
    <feGaussianBlur stdDeviation="10" result="blurphoto"/>
    <feComposite operator="in" in="photo" in2="SourceGraphic" result="photomask"/>
    <feComposite operator="over" in2="blurphoto" in="photomask"/>
  </filter>
  </defs>
  <polygon filter="url(#cutout)" points="20,10 250,190 200,30 160,34 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

带掩模的SVG过滤器

2 个答案: