Question

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

<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> </rect>添加阴影

1 个答案: