SVG光影3D填充

Question

bounty到期在7天内。该问题的答案有资格获得+ 200声望赏金。evgeni fotia希望引起更多关注来回答这个问题。

我想通过在顶部和左侧BORDER以及底部和右侧BORDER的阴影中添加一个小灯，使svg看起来像在3D上一样。

类似这样的东西

#div1 {
  background: #ddd;
}
#div1, #div2, #div3 {
  width: 100px;
  height: 100px;
  position: relative;
}
#div2 {
  box-shadow: inset -2px -2px 10px 1px #000;
  position: absolute;
}
#div3 {
  box-shadow: inset 2px 2px 14px 1px #fff;
  position: absolute;
}
<div id="div1">
  <div id="div2"></div>
  <div id="div3"></div>
</div>

但是我不知道如何使用svg过滤器做到这一点

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1000">


<defs>
  <filter id="filter1" x="0" y="0">
    <feSpecularLighting result="specOut"
        specularExponent="20" lighting-color="#bbbbbb">
      <fePointLight x="-100" y="-100" z="600"/>
    </feSpecularLighting>
    <feComposite in="SourceGraphic" in2="specOut"
        operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
  </filter>
</defs>

<path filter="url(#filter1)" fill="#fff" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>



</svg>

请帮助，谢谢

[我想通过在顶部和左侧BORDER处添加小灯，在底部和右侧BORDER中添加阴影，使svg看起来像3D，就像这样＃div1 {background：#ddd; }＃...

Answer 1

[首先，您尝试用暗白色的光照亮纯白色矩形。您不会看到任何东西。