Question

我需要为rect的{{1}}元素制作阴影。下面的代码段完成了这项工作，但我不知道如何控制阴影的颜色/不透明度？任何帮助将不胜感激！

svg

Answer 1

通过类似的示例来看看这个w3schools page。根据那里给出的示例，您似乎需要添加更多过滤器（例如feColorMatrix和feGaussianBlur）以获得所需的效果。

使用新过滤器的代码：

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

您也可以使用此jsfiddle。

<强>更新

我们可以实现不透明度和仅使用feColorMatrix过滤器更改颜色。请查看此更新的jsFiddle。

但是，为了获得所需的颜色，您需要了解有关设置values的{{1}}属性的更多信息。

以下链接可能会有所帮助：

在svg中的rect的阴影

1 个答案: