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 + shadow在该矩形上->它用黑色高亮白色边框，因此在任何背景上都可见。需要找到一种在没有过滤器的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>

Answer 2

回答我自己的问题-很好的解决方案是使用辅助矩形（必须先放置SVG层，然后再放置最后一个项），使其比其他矩形大一些，以便轮廓清晰。

body {
  background: green;
}
#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);
}
#mainRect{
    fill: none;
    stroke: white;
    stroke-width: 0.5mm;
    stroke-dasharray: 3mm;
}
#secondaryRect{
    stroke: #424242;
    stroke-width: 1mm;
    stroke-dasharray: 3mm;
}

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

优雅的SVG阴影轮廓，以提高可见度（不使用滤镜）

2 个答案: