如何向<rect>添加阴影

Question

我试图以最简单的方式向<rect>元素添加阴影效果。我尝试了一系列不同的过滤器和CSS属性，但它不起作用。

http://codepen.io/anon/pen/rhKxd

<svg width="960" height="500">
  <rect width="170" height="100" stroke-width="0" transform="translate(250,100)"></rect>
</svg>

CSS：

rect {
  fill: orange;
  box-shadow: 2px 2px 2px #666;
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

唯一起作用的是带有偏移量和模糊性的SVG过滤器，但这是唯一的方法吗？

Answer 1

创建阴影的另一种简单方法是复制位于其后面的物体，稍微偏移，并以不同的颜色显示：

<rect width="170" height="100" stroke-width="0"
      transform="translate(255,105)" class="shadow"></rect>

rect.shadow {
    fill: black;
}

请注意，.shadow rect必须在普通rect之前定义，这样它就会在下面分层。