<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>阴影</title>
</head>
<body>
<svg width="300" height="1000" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="fil1" x="0" y="0" width="200" height="200">
<!-- feOffset标签 控制的是阴影 -->
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<!-- feGaussianBlur标签 控制的是原始图像 -->
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<!-- feBlend标签 是将阴影图像与原始图像进行混合 -->
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="2" fill="red" filter="url(#fil1)" />
</svg>
<svg width="300" height="1000" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="lll" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect x="10" y="10" width="90" height="90" stroke="green" stroke-width="2" fill="red" filter="url(#lll)">
</rect>
</svg>
</body>
</html>上述运行结果:
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
