html svg 阴影,SVG

SVG代表可缩放矢量图形。它可以像HTML画布一样用于制作图形和动画。

元素与其他过滤器原语结合使用，可以为图形添加阴影。它在原始输入后面提供了一个模糊，彩色和可选的偏移层。

用法:

属性：

in:它标识给定过滤器原语的输入。

dx， dy:它定义了元素在其相应的x，y轴上的位置偏移。

stdDeviation:它定义了应用于阴影的模糊量。默认值为0。

范例1：

HTML

filterUnits="objectBoundingBox"

x="-50%" y="-60%" width="250%"

height="250%">

dx="1" dy="1" stdDeviation="30"

flood-color="darkgreen" />

style="stroke:#000000;

fill:lightgreen;

filter:url(#drop_shadow);" />

style="stroke:#000000;

fill:lightgreen;

filter:url(#drop_shadow);" />

font-size="10" font-family="Verdana">

GeeksForGeeks

输出：

范例2：

HTML

filterUnits="objectBoundingBox"

x="-10%" y="-10%" width="300%"

height="300%">

stdDeviation="6"

flood-color="shadow"

flood-opacity="2" />

height="118" style="stroke:#000000;

fill:green; filter:url(#blur);" />

stroke="darkgreen" stroke-width="3"

fill="Lightgreen"

style="stroke:filter:url(#blur);" />

font-size="10" c font-family="Verdana">

GeeksForGeeks

输出：