Expand the bounding box of a svg path - css

Question

Here's a jsfiddle of what I have so far: https://jsfiddle.net/tcetcvmu/
Notice how the lower path has a large yellow glow, but the upper path does not. I believe this is because the lower path has a bounding box that mostly encompasses the yellow glow, but the upper path has a small bounding box that does not encompass where the yellow glow would be.
I'd like to expand the bounding box so that the upper path has a glow as well. Ideally, I'd like to do this outside of the path definition, as the paths are programmatically generated.
HTML code:
<svg>
<filter id="outline_selected" x="-50%" y="-50%" width="200%" height="200%">
<feMorphology result="offset" in="SourceGraphic" operator="dilate" radius="3"/>
<feColorMatrix result="drop" in="offset" type="matrix"
values="1 1 1 1 1
1 1 1 1 1
0 0 0 0 0
0 0 0 1 0" />
<feBlend in="SourceGraphic" in2="drop" mode="normal" />
</filter>
<path class="individual" d="M256.5,29.5625C369.75,29.5625 369.75,29.5625 483,29.5625L483,30.5625C369.75,30.5625 369.75,30.5625 256.5,30.5625Z" style="stroke-width: 1px;"></path>
<path class="individual" d="M256.5,216.9375C369.75,216.9375 369.75,276.0625 483,276.0625L483,277.0625C369.75,277.0625 369.75,217.9375 256.5,217.9375Z" style="stroke-width: 1px;"></path>
</svg>
CSS:
.individual {
fill: rgba(255, 0, 0, 1);
filter:url(#outline_selected);
}
svg {
width: 500px;
height: 500px;
}

Answer 1

if you need a filter on such a straight line, use a rect with a height 1px, and only make the filter region as large as needed. If your straight 1px heigh line(rect) needs 3px radius from Morphology us small width and x avlues for your filter region and y="-100%" height="300%"
<svg width="200" height="200" viewBox="0 0 100 100">
<filter id="outline_selected" x="-1%" y="-100%" width="102%" height="300%">
<feMorphology result="offset" in="SourceGraphic" operator="dilate" radius="3"/>
<feColorMatrix result="drop" in="offset" type="matrix"
values="1 1 1 1 1
1 1 1 1 1
0 0 0 0 0
0 0 0 1 0" />
<feBlend in="SourceGraphic" in2="drop" mode="normal" />
</filter>
<rect x="5" y="50" width="90" height="1" filter="url(#outline_selected)"/>
</svg>

Answer 2

It's many years later, but I am running into a similar issue, and here is what I have found. Using a rectangle won't work since you clearly want to use curved paths.
The filter units are set to the objectBoundingBox by default. In the case of the first line, the height of the bounding box is very small, and even a 300% height is not enough to encompass the full filter you have. It's very slightly tilted, its actually not height 0. If it were exactly 0, you wouldn't see any effect at all since even 300% of the height would be 0. So this wouldn't even work at all with straight vertical or straight horizontal paths.
You could set filterUnits prop of the filter to 'userSpaceOnUse' instead, and you wouldn't need the coords/dims either.
However, userSpaceOnUse sets the coordinates at the time that the filter is referenced. So if you apply a transform later to a parent element, you may end up cropping the effect.
The best solution, I think, is to wrap each of your paths in a element and apply the filter on the instead. And then, add some invisible object to the , sibling to your path which will expand the bounding box of the g beyond just the path. You could add an invisible 90% rotated (around center) version of your path. Or simply a path with a bunch of "M"s in it's d prop that moves around to create a larger bounding box. There are a lot of options here, but the idea is to have some non-visible object with a bounding box that is as big as you want your filter to encompass. It depends on how your paths are being generated what is easier to do.
quick fix:
<filter id="outline_selected" filterUnits = 'userSpaceOnUse'>
But this may run into cropping issues depending on if you use transforms above this element after it has already been rendered.