I am trying to apply multiple operations to shapes. (Eventually, my end goal is to blur 2 different shapes using a different color matrix and then blend them together. This is only a reproducible example where I am stuck.)
I cannot understand why I am seeing a difference between the two cases mentioned here.
<svg width="400" height="300">
<rect width="400" height="300" fill="#5d48c7"/>
<defs>
<filter
id="my-blur"
x="-50%" y="-50%" width="200%" height="200%"
>
<feGaussianBlur stdDeviation="15"/>
</filter>
<rect id="rect1" width="200" height="150" x="50" y="50" fill="white" filter="url(#my-blur)"/>
</defs>
<!-- Case 1: Blurred and works as expected -->
<use href="#rect1" />
</svg>But when I am using the output of the second-filter, which is just a passthrough, I am getting this:
<svg width="400" height="300">
<rect width="400" height="300" fill="#5d48c7"/>
<defs>
<filter
id="my-blur"
x="-50%" y="-50%" width="200%" height="200%"
>
<feGaussianBlur stdDeviation="15"/>
</filter>
<rect id="rect1" width="200" height="150" x="50" y="50" fill="white" filter="url(#my-blur)"/>
<filter id="second-filter"
x="0" y="0" width="400" height="300"
>
<feImage href="#rect1"/>
</filter>
</defs>
<!-- Case 1: Blurred and works as expected -->
<!-- <use href="#rect1" /> -->
<!-- Case 2: maybe blurred?, positioned differently, looks to be cut off -->
<rect width="400" height="300" filter="url(#second-filter)" fill="red" />
</svg>In the second example, I am just using an feImage to reference the shape, but for some reason it gets cut off and the positioning is off. I have no idea how to configure the #second-filter to just use the blurred rectangle as an input image so that I will be able to apply multiple operations on it later on.