Html svg中rect的阴影

我需要为

svg

的

rect

元素制作一个阴影。下面的代码片段完成了这项工作，但我不知道如何控制阴影的颜色/不透明度？任何帮助都将不胜感激

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

遇到了类似的例子。根据这里给出的示例，您似乎需要再添加几个过滤器（如

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)" />

你也可以用这个

更新：

我们只需使用

feColorMatrix

filter即可实现不透明度和颜色变化。检查此更新

但是，为了获得所需的颜色，您需要了解有关设置

feColorMatrix

的

值的更多信息

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