svg滤镜和渐变

最新推荐文章于 2024-06-13 00:30:00 发布

sh2001824

最新推荐文章于 2024-06-13 00:30:00 发布

阅读量331

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/sh2001824/article/details/125853548

版权

所以Internet SVG 滤镜都在<defs>元素中定义

<defs>元素是定义的缩写，包含特殊元素（例如滤镜）的定义
<filter>元素用于定义SVG滤镜
<filter>元素具有必需的id属性，用于表示滤镜。形状然后指向使用的滤镜
feOffset：使用偏移路径，元素用于创建阴影效果；想法是拍摄SVG图形（图像或元素）并将其在xy平面中移动一点，然后将原始图像混合在偏移的图像顶部（使用<feBlend>）
feBlend ：使用混合路径，主要将原始标签显示出来
feGaussianBlur：模糊滤镜他当中的（stdDeviation属性是用来设置模糊度的）

一、svg滤镜

1.普通滤镜（基本）

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg>
        <!-- 定义一个滤镜，defs是一个定义标签 -->
        <defs>
            <!-- 第一个过滤器 -->
            <filter id="n1" width="200%" height="200%">
                <!-- 使用偏移路径 -->
                <feOffset in="SourceGraphic" result="0ffset1" dx="20" dy="20"></feOffset>
                <!-- 模糊滤镜   stdDeviation：设置模糊度 -->
                <feGaussianBlur result="bule" in="colorMatrix" stdDeviation="5"></feGaussianBlur>
                <!-- 使用混合路径，主要将原始标签显示出来 -->
                <feBlend in="SourceGraphic" in2="bule" mode="normal"></feBlend>
            </filter>
        </defs>
        <rect x="0" y="0" width="200" height="100" filter="url(#n1)" fill="red" stroke="green"></rect>
    </svg>
</body>