阴影隐藏在元素svg之外

Question

也许有人遇到过这个问题。如何在不产生内部相对偏差的情况下纠正这种情况？我想实现这样的效果，使阴影在各个方面都顺利地离开项目下方。

我只能在CSS 上描述我的意思（在 SVG 上我还不知道如何）： box-shadow: 0 3px 16px 5px rgba(0,0,0,.3);

问题：

<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>

需要：

#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：感谢您的帮助和您的时间。

我已经看到了很多解决方案，我会提前写下，阴影不需要应用到所有项目，如果你有同样的情况，你需要对所有通过 CSS 完成的子元素应用阴影在根 SVG 元素上添加：filter:drop-shadow(0 3px 15px #000)

更新： @enxaneta（<path /> 的错误）- 根据参考点 p2y（贝塞尔曲线）的位置剪裁阴影。仍在寻找解决方案...使其不被割礼。

<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

重新定义过滤器的大小并移除偏移量 (feOffset)

<filter> 的 x 属性的默认值为 -10%。通过将其设置为0，您会切断部分图像。不使用x 和y 属性通常是个好主意。

<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>

我希望这是你需要的。

更新

OP 通过添加新路径更新了他们的问题。

为清楚起见，我简化了 svg。这种情况下的解决方案意味着将所有路径放在<g> 元素中并将过滤器应用于组。我也在使用filterUnits ="userSpaceOnUse" 作为过滤器。

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>

Answer 2

我无法完全到达那里，也无法获得指定的 5px 传播。 在这里发帖是因为它可能仍然有用。

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>

附：你可以使用这个Codepen by Michael Mullany 来构造 SVG 投影。