What causes this bigger SourceAlpha than SourceGraphic

I was trying to make the following box have a bigger clickable area:

<svg width="150" height="150">
  <rect x="10.5" y="10.5" width="10" height="10"
        stroke="black" stroke-width="3" fill="none"/>
</svg>

so to do that, I messed around a bit with filters; first I applied a color matrix, and then I wanted to start changing the size of the black background part, but it was somehow already bigger than the original graphic:

<svg width="150" height="150">
  <filter id="fillBlack">
    <feColorMatrix type="matrix" in="SourceAlpha" result="blackBox"
        values="0 0 0 0 0
                0 0 0 0 0
                0 0 0 0 0
                1 1 1 1 1"/>
    <feComposite operator="over" in="SourceGraphic" in2="blackBox"/>
  </filter>
  <rect x="50" y="50" width="10" height="10" filter="url(#fillBlack)"
        stroke="transparent" stroke-width="50" fill="white"/>
</svg>

Now, this seems to come pretty close to my desired result already, but there are two problems: firstly, I really don't understand why this would work, and secondly, because I don't know what causes this, I can't resize the black background.

It seems like the background is always 10% bigger; try changing the values for width and height on the <rect>, and the black background will be a border of 10% the entered width/height around the original box

So what causes the SourceAlpha to be bigger, and how do I actually resize the black background so I can have it the size I want?

PS: I'd very much prefer not to put another <rect> over the current one, but rather I'd have everything done with a filter like what I've got here.

Solution

By default, the filter region is 10% bigger on all sides. This is to allow for filter primitives like feGaussianBlur which can make the graphic bigger.

You can change the filter effects region by using the attributes x, y, width and height on the <filter> element. They default to -10%, -10%, 120% and 120% respectively.

I recommend reading the section on filters in the SVG spec.

But even though filters can result in something being drawn larger, it shouldn't change the actual size or shape of the region that responds to pointer events.

There is only one way I can think of that you can use to make the click area larger without adding extra elements.

Give the shape a large, but invisible, stroke width
Set pointer-events="all"

Setting pointer-events to "all" makes both the stroke and fill areas sensitive even if they are invisible. Compare the behaviour of the squares in this example.

rect:hover {
   fill: orange;
}

<svg width="350" height="200">
  
  <rect x="50" y="50" width="100" height="100" fill="red"/>
  
  <rect x="200" y="50" width="100" height="100" fill="green"
        stroke="black" stroke-opacity="0" stroke-width="40" pointer-events="all"/>

</svg>