时间戳

首页 > 解决方案 > 从 CSS 过滤器制作真正的 SVG feDropShadow 阴影：drop-shadow()？

html - 从 CSS 过滤器制作真正的 SVG feDropShadow 阴影：drop-shadow()？

问题描述

我想知道这是一种手动将 CSSdrop-shadow转换为纯 SVG的方法feDropShadow，还是某种环境？

就像这个例子：

    filter: drop-shadow(0px 1px 0.1px #fff) drop-shadow(0px 1px 3px #a3d900de);

像下面这样的东西是行不通的：

<filter id="some_id">
  <feDropShadow dx="0" dy="1" stdDeviation=".1" flood-color="#fff" />
  <feDropShadow dx="0" dy="1" stdDeviation="3" flood-color="#a3d900de" />
</filter>

提前致谢。

标签： htmlcsssvg

解决方案

您可以通过drop-shadow()在 CSS 规范中查找过滤器函数的定义来回答这类问题。

定义在这里：

https://drafts.fxtf.org/filter-effects/#dropshadowEquivalent

或者，在 MDN 上也有描述

https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()_2

推荐阅读