2023学年完整公开课版SVG滤镜效果

SVG滤镜效果高斯模糊<svgheight="500"width="500"><defs><filterid="f1"x="0"y="0"><feGaussianBlurin="SourceGraphic"stdDeviation="15"/></filter></defs><rectwidth="90"height="90"stroke="green"stroke-width="3"fill="yellow"filter="url(#f1)"/></svg><feGaussianBlur/>标签用于高斯模糊浏览器查看效果:SVG滤镜效果模糊偏移图像SVG滤镜效果<svgheight="500"width="500"><defs><filterid="f1"x="0"y="0"width="200%"height="200%"><feOffsetresult="offOut"in="SourceGraphic"dx="20"dy="20"/><feGaussianBlurresult="blurOut"in="offOut"stdDeviation="10"/><feBlendin="SourceGraphic"in2="blurOut"mode="normal"/></filter></defs><rectwidth="90"height="90"stroke="green"stroke-width="3"

fill="yellow"filter="url(#f1)"/></svg>浏览器查看效果:黑色阴影效果<svgheight="500"width="500"><defs><filterid="f1"x="0"y="0"width="200%"height="200%"><feOffsetresult="offOut"in="SourceAlpha"dx="20"dy="20"/><feGaussianBlurresult="blurOut"in="offOut"stdDeviation="10"/><feBlendin="SourceGraphic"in2="blurOut"mode="normal"/></filter></defs><rectwidth="90"height="90"stroke="green"stroke-width="3"fill="yellow"filter="url(#f1)"/></svg>浏览器查看效果:SVG滤镜效果应用模糊效果SVG滤镜效果<svgheight="500"width="500"><defs><filterid="MyFilter"filterUnits="userSpaceOnUse"x="0"y="0"width="200"height="120"><feGaussianBlurin="SourceAlpha"stdDeviation="4"result="blur"/></filter></defs><rectx="1"y="1"width="198"height="118"fill="#cccccc"/><gfilter="url(#MyFilter)"><pathfill="none"stroke="#D90000"stroke-width="10"d="M50,90C0,900,3050,30L150,30C200,30200,90150,90z"/><textfill="#FFFFFF"stroke="black"font-size="45"font-family="Verdana"x="52"y="76">SVG</text></g></svg>打开浏览器的效果图:应用模糊效果SVG滤镜效果<svgheight="500"width="500"><defs><filterid="MyFilter"filterUnits="userSpaceOnUse"x="0"y="0"

width="200"height="120"><feGaussianBlurin="SourceAlpha"stdDeviation="4"result="blur"/><feOffsetin="blur"dx="4"dy="4"result="offsetBlur"/><feSpecularLightingin="blur"surfaceScale="5"specularConstant=".75"

specularExponent="20"lighting-color="#bbbbbb"result="specOut"><fePointLightx="-5000"y="-10000"z="20000"/></feSpecularLighting><feCompositein="specOut"in2="SourceAlpha"operator="in"

result="specOut"/></filter></defs>

SVG滤镜效果

<rectx="1"y="1"width="198"height="118"fill="#cccccc"/><gfilter="url(#MyFilter)"><pathfill="none"stroke="#D90000"stroke-width="10"d="M50,90

C0,900,3050,30L150,30C200,30200,90150,90z"/>