CODEWITHSUNDEEP
svgsvg-filters
user3934288
user3934288

Reputation: 51

Why does my content disappear when I specify a positive x/y in my SVG Filter Region?

I am learning SVG. I am not able to understand the filter attributes. Why are the values of x and y negative in this sample code. And why does my content disappear when I specify positive values? 

<defs>
<filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />  
</defs>

<rect x="20" y="24" width="90" height="90"
  style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />

Upvotes: 2

Views: 500

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Because some filters can take a lot of processing to compute, SVG asks you to specify the area over which the filter will be calculated. Obviously the smaller the region, the faster it can be calculated.

The x, y, width, and height attributes define that filter region.

You usually want it to be as small as possible - as long as it completely covers the area affected by the filter. For most filter primitives, the filter region can be the same size as the element being filtered.

However feGaussianBlur is not one of those. The blur makes the object larger than its original size, so you need to make the filter region bigger on all sides.

I made x and y to positive then the shape disappears

That is because the default coordinate space for those attributes is filterUnits="objectBoundingBox". So those coordinates are supposed to be between 0 and 1. (0,0) corresponds to the top left of the original element, and (1,1) corresponds to the bottom right.

By accident, your coordinates cover the area between 0 and 1, so the filter works. But if you make the x or y greater than one, then the filter region doesn't overlap with the original element anymore.

If you want to use absolute coordinates like

x="-20" y="-20" width="200" height="200"

then you need to change to filterUnits="userSpaceOnUse".

<svg viewBox="0 0 200 200">

  <defs>
    <filter id="blurFilter5" filterUnits="userSpaceOnUse"
            x="-20" y="-20" width="200" height="200">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
  </defs>

  <rect x="20" y="24" width="90" height="90"
        style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />
</svg>

Now try changing x from "-20" to something else - for example "40" - and see what happens.

Upvotes: 4

Related Questions