CODEWITHSUNDEEP
svgsvg-filters
MartinP
MartinP

Reputation: 407

SVG Filter with a mask

There is a filter

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

applied to image

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

I have a certain shape:

<polygon points="">

How can I use the polygon as a mask where the filter is not applied?

Upvotes: 2

Views: 3028

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31705

You could also apply the filter to the polygon and then use feImage to import your image into the filter. Using feComposite "in" will do the masking.

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

Upvotes: 2

Robert Longson
Robert Longson

Reputation: 123985

Use two <image> elements at the same location.

  • The first image would have a filter (as you have it now).

  • The second image would not have a filter, instead it would have a clip.

  • The clipPath used by the second image will need to have the polygon as its contents.

If you really want one image, you could probably merge the images using canvas drawImage and then write out the composite image to a new <image> element.

Upvotes: 1

Related Questions