隐藏在元素svg

时间：2019-02-14 15:50:39

标签： javascript svg ecmascript-6 svg-filters

也许有人遇到了这个问题。如何在不产生内部相对偏差的情况下进行纠正？我想达到这样的效果，使阴影在所有面上都平滑地离开项目下方。

我只能在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通过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>

2 个答案:

答案 0 :(得分：2)

重新定义过滤器的尺寸并删除偏移量（feOffset）

x的{​​{1}}属性的默认值为-10％。通过将其设置为<filter>，可以剪切掉部分图像。不使用0和x属性通常是个好主意。

y

我希望这是您所需要的。

更新

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

为清楚起见，我简化了svg。在这种情况下，解决方案意味着将所有路径放入<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>元素中，并将过滤器应用于该组。另外，我正在使用<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);
}

答案 1 :(得分：1)

我不能完全到达那里，也无法获得指定的5像素点差。 在此发布，因为它可能仍然有用。

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。您可以使用此Codepen by Michael Mullany来构建SVG阴影。

相关问题
最新问题