带遮罩的 SVG 过滤器答案

【问题标题】：SVG Filter with a mask带遮罩的 SVG 过滤器
【发布时间】：2018-02-11 20:09:42
【问题描述】：

有一个过滤器

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

应用于图像

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

我有一定的形状：

<polygon points="">

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

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

您也可以将过滤器应用于多边形，然后使用 feImage 将您的图像导入过滤器。使用 feComposite "in" 将进行掩蔽。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这就是我目前所做的。我需要一个带有单个图像的解决方案，但如果不可能，那么我会认为你的答案是正确的。
然后使用画布合并它们。