SVG绘图高斯模糊滤镜
运用SVG绘图实现一个模糊字体效果，比用CSS的阴影写出来的要好看的多。
实现效果如下：
实现代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SVG绘图高斯模糊滤镜</title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<h1>SVG绘图高斯模糊滤镜</h1>
<svg id="s9" width="500" height="400">
<defs>
<!--滤镜也属于特效对象-->
<filter id="f2">
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
</filter>
<filter id="f3">
<feGaussianBlur stdDeviation="6"></feGaussianBlur>
</filter>
</defs>
<text font-size="70" x="100" y="100">清华大学</text>
<text font-size="70" x="100" y="200" filter="url(#f2)">清华大学</text>
<text font-size="70" x="100" y="300" filter="url(#f3)">清华大学</text>
</svg>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/06/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
