Разверните ограничительную рамку пути SVG

Question

Вот jsfiddle того, что я до сих пор: https://jsfiddle.net/tcetcvmu/

Обратите внимание, как нижний путь имеет большой желтый цвет, но верхний путь не делает. Я считаю, что это потому, что нижний путь имеет ограничивающий прямоугольник, который в основном охватывает желтое свечение, но верхний путь имеет небольшую ограничительную рамку, которая не охватывает, где будет желтое свечение.

Я хотел бы расширить ограничительную рамку, чтобы верхняя дорожка тоже светилась. В идеале я бы хотел сделать это за пределами определения пути, поскольку пути программно сгенерированы.

HTML код:

<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

если вам нужен фильтр на такой прямой, используйте прямоугольник с высотой 1px, и только делают насколько это необходимо. Если прямая 1px Heigh линия (прямоугольник) необходим 3px радиус от Морфология нам малую ширину и х avlues для региона фильтра и у = "- 100%" высота = "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>