svg中矩形的阴影答案

【问题标题】：Shadow for rect in svgsvg中矩形的阴影
【发布时间】：2015-10-12 05:15:10
【问题描述】：

我需要为svg 的rect 元素制作阴影。下面的sn-p就可以了，但是我不知道如何控制shadow的color/opacity？任何帮助将不胜感激！

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

【问题讨论】：

标签： html svg

【解决方案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。

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

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

【讨论】：