SVG绘图高斯模糊滤镜

2020-11-26 15:01:23 浏览数 (1)

运用SVG绘图实现一个模糊字体效果，比用CSS的阴影写出来的要好看的多。

实现效果如下：

实现代码如下：

代码语言：javascript复制

<!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>

svg

0 人点赞