I am trying to create a gaussian blur SVG filter that can be reused without modification by people who are not programmers.
The problem I am running into is that the way the width, height, x, and y, values are defined doesn't seem appropriate for actual use.
<filter id="6pxBlur" filterUnits="objectBoundingBox"
width="140%" x="-20%" height="140%" y="-20%">
<feGaussianBlur stdDeviation="6"></feGaussianBlur>
</filter>
The feGaussianBlur filter is specified in pixels, so it would be useful to say "add a 6px margin to the original size to include the extra size added by blurring the shape."
Instead, the filter area is defined as a percentage of the original shape.
- it cuts off the edge of the filter effect with narrow shapes
- it includes a lot of extra space with wide shapes
Is there any way to define SVG filter width and height in terms of a margin relative to the original size?
It looks like I'll end up using large width and height values just to be safe, but this will be inefficient and slow down page drawing in most cases.
Is there a better solution?