javascript - 优雅的 SVG 阴影轮廓可见性(不使用过滤器)

Question

我需要找到一种方法来勾勒出我的透明矩形的轮廓，该矩形具有黑色描边和某种阴影，以使其在任何颜色背景上都可见

这是我尝试在没有过滤器的情况下(不能使用它们，因为它会导致太多回流)使用两个矩形 - 但它看起来不像带阴影的 div 那样漂亮。

https://codepen.io/anon/pen/omMmRj

<svg id='mySvg' width="100mm" height="100mm">
   <rect id="mainRect" x="25mm" y="25mm" height="50mm" width="50mm" fill="none"></rect>
   <rect id="secondaryRect" x="25.5mm" y="25.5mm"  height="49mm" width="49mm" fill="none"></rect>
</svg>

body {
  background: white;
}
#hello{
  height: 200px;
  width: 200px;
  border: 1px solid white;
  margin-top:50px;
  margin-left:50px;
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.55);
}

这里是示例输出，我希望使用 div + 阴影在该矩形上 -> 它用黑色突出显示白色边框，因此它在任何背景上都可见。需要找到一种方法在没有过滤器的情况下对 svg rect 执行相同的操作。

https://codepen.io/anon/pen/KJBEKG

Answer 1

您的问题的一个解决方案是使两个矩形大小相同，并对两个矩形之一使用 stroke-dashoffset:

#mySvg{
  border:1px solid black;
  background:orange;
}
#mainRect{
  stroke : white;
  stroke-width: .5mm;
  stroke-dasharray : 3.5mm;
}
#secondaryRect{
  stroke : black;
  stroke-width: .5mm;
  stroke-dasharray : 3.5mm;
  stroke-dashoffset : 3.5mm;
}

<svg id='mySvg' width="100mm" height="100mm">
  <rect id="mainRect" x="25mm" y="25mm" height="50mm" width="50mm" fill="none"></rect>
    <rect id="secondaryRect" x="25mm" y="25mm"  height="50mm" width="50mm" fill="none"></rect>
</svg>

另一种解决方案是使用过滤器。请注意，在这种情况下，我已将 fill="orange"添加到您的矩形中。

#mySvg{
  border:1px solid black;
  background:orange;
}
#mainRect{
  stroke : white;
  stroke-width: .5mm;

}

<svg id='mySvg' width="100mm" height="100mm">
  <filter id="outline">
<feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
<feComposite in="SourceGraphic"/>
</filter>
  <rect id="mainRect" x="25mm" y="25mm" height="50mm" width="50mm" fill="orange" filter="url(#outline)"></rect>   
</svg>