Drop shadow hidden outside element svg

Question

Perhaps someone faced this problem. How can this be corrected without making an internal relative bias? I would like to achieve the effect so that the shadow is on all sides smoothly leaving under the item.

I can only describe on the CSS what I mean (on SVG I don't know how yet): box-shadow: 0 3px 16px 5px rgba(0,0,0,.3);

Problem:

<svg height="0">
<filter id="drop-shadow-path-line" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="-20" dy="20" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</svg>

<svg height="200" width="200">
  
  <g transform="translate(25 25)">
    <rect x="0" y="0" width="100" height="100" fill="orange" filter="url(#drop-shadow-path-line)" />
  <g>

<svg>

Need:

#exmaple-svg{
   position:relative;
   top:25px;
   left:25px;

}

.item{
  position: absolute;
  left: 20px;
  top: 20px;
  width:100px;
  height:100px;
  background-color: rgba(255,0,0,.5);
  filter:drop-shadow(0 4px 15px #000);
}

<div id="exmaple-svg">
   <div class="item"><div>
</div>

PS:Thank You for any help and Your time.

I have seen many solutions and I will write in advance, the shadow need not apply to all items, if You have the same situation and You need to apply a drop shadow to all child elements that it features are done via CSS by adding:filter:drop-shadow(0 3px 15px #000)on the root SVG element

Updated: for @enxaneta (bug with <path />) - shadow is clipped depending on the location of the reference point p2y (Bezier curve). Still looking for a solution... so that it is not circumcised.

<svg viewBox="100 50 250 250">

<path d="M136.8595428466797 123.9515609741211 C 181.78643913269042 123.9515609741211 158.49101142883302 131.44540405273438 203.41790771484375 131.44540405273438" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>

    <path d="M136.8595428466797 123.9515609741211 C 179.60736618041992 123.9515609741211 157.44182815551758 124.271484375 200.1896514892578 124.271484375" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>

    <path d="M136.8595428466797 123.9515609741211 C 176.21768913269042 123.9515609741211 155.809761428833 53.60844039916992 195.16790771484375 53.60844039916992" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
    
    <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 119.24974060058594 202.7005157470703 119.24974060058594" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
  
  
  <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 102.39105224609375 202.7005157470703 102.39105224609375" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
  
  
  <path d="M133.2725830078125 154.7993927001953 C 181.83128128051757 154.7993927001953 156.6526969909668 170.1845245361328 205.21139526367188 170.1845245361328" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
  
  <filter id="drop-shadow-path-line"  width="200%" height="200%">

<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</svg>

Answer 1

I couldn't quite get there and was unable to get the 5px spread specified. Posting here because it may still be useful.

div { /* just so we can see what the css version would look like */
background:orange;
width:100px;
height:100px;
box-shadow: 0 4px 15px 5px rgba(0,0,0,.3);
}

<svg height="0">
<filter id="dropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="15" />
    <feOffset dx="0" dy="3" />
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.4"/>
    </feComponentTransfer>
    <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>

<svg height="200" width="200" filter="url(#dropShadow)">
  <g transform="translate(50 50)" >
    <rect x="0" y="0" width="100" height="100" fill="orange" />
  <g>
<svg>

<div></div>

P.S. You could use this Codepen by Michael Mullany to construct SVG drop shadows.

Answer 2

Redefine the size of your filter and remove the offset (feOffset)

The default value for the x attribute for <filter> is -10%. By setting it 0 you cut off part of the image. Not using the x and y attributes is often a good idea.

<svg height="0">
<filter id="drop-shadow-path-line"  width="200%" height="200%">

<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>


</svg>

<svg height="200" width="200">
  
  <g transform="translate(25 25)">
    <rect x="0" y="0" width="100" height="100" fill="orange" filter="url(#drop-shadow-path-line)" />
  <g>

<svg>

I hope this is what you need.

UPDATE

The OP updated their question by adding a new path.

For clarity I've simplified the svg. The solution in this case implies putting all paths in a <g> element and aplying the filter to the group. Also I'm using filterUnits ="userSpaceOnUse" for the filter.

svg {
  border: 1px solid;
}

path {
  stroke-width: 2;
  stroke: rgb(178, 34, 34);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
g{
  filter:url(#drop-shadow-path-line);
}

<svg viewBox="100 50 250 250">
<defs> 
<filter id="drop-shadow-path-line" filterUnits ="userSpaceOnUse" >
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3"  />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>  
    <path d="M136.8595428466797 123.9515609741211 C 181.78643913269042 123.9515609741211 158.49101142883302 131.44540405273438 203.41790771484375 131.44540405273438" sclass="active" ></path>

    <path d="M136.8595428466797 123.9515609741211 C 179.60736618041992 123.9515609741211 157.44182815551758 124.271484375 200.1896514892578 124.271484375"   class="active" ></path>

    <path d="M136.8595428466797 123.9515609741211 C 176.21768913269042 123.9515609741211 155.809761428833 53.60844039916992 195.16790771484375 53.60844039916992"  class="active" ></path>
    
    <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 119.24974060058594 202.7005157470703 119.24974060058594"  class="active" ></path>
  
  
  <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 102.39105224609375 202.7005157470703 102.39105224609375"  class="active" ></path>
  
  
  <path d="M133.2725830078125 154.7993927001953 C 181.83128128051757 154.7993927001953 156.6526969909668 170.1845245361328 205.21139526367188 170.1845245361328" class="active" ></path>

  </g>

</svg>