2022/7/18-SVG笔记

目录

一、SVG阴影

1、<feoffset>偏移

2、<feGaussianBlur>模潮

3、<feColorMatrix>涂色

二、SVG渐变

1、<linearGradient>线性渐变

2、<radialGradient>径向渐变

---

一、SVG阴影

<defs>和<filter>

• 所有Internet SVG滤镜都在<defs>元素中定义。

• <defs>元素是定义的缩写。包含特殊元素（例如滤镜）的定义。

• <filter>元素用于定义SVG滤镜。

• <filter>元素具有必需的id属性，用于标识滤镜。图形然后指向要使用的滤镜。 

滤镜的属性
属性	作用
x,y	提供左上角的坐标来定义在哪里渲染滤镜效果。(默认值:0)
width, height	绘制滤镜容器框的高宽（默认松100%)
result	用于定义一个滤镜效果的输出看手，以便将其用作另一个滤镜效果的输入(in)
in	指定滤镜效果的输入源，可以是某个滤镜导出的result ，也可以是下面6个值

feBlend 滤镜的模式:

• normal——正常
• multiply——正片叠底
• screen ——滤色
• darken——变暗
• lighten——变亮

---

1、<feoffset> 

        <feoffset>元素用于创建阴影效果;想法是拍摄SVG图形(图像或元素）并将其在xy平面中移动一点，然后将原始图像混合在偏移图像的顶部（使用<feBlend> )。

        示例1:偏移一个矩形

        示例代码如下:
 

<svg>
    <!-- 定义滤镜 defs是一个定义标签 -->
    <defs>
        <!-- 定义一个过滤器 -->
        <filter id="f1" x="0" y="0" width="200%" height="200%">
            <!-- 使用偏移路径 -->
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
            <!-- 使用混合滤镜，将原始标签显示出来 -->
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
        </filter> 
    </defs>
    <rect x="0" y="0" width="200" height="100" fill="red" stroke="black" filter="url(#f1)"></rect>
</svg>

<filter>元素id属性定义一个滤镜的唯一名称

<rect>元素的滤镜属性用来把元素链接到"f1"滤镜

in="SourceGraphic"指的是模糊效果要应用于整个图片

---

2、<feGaussianBlur>

        <feGaussianBlur>可以使偏移图像变的模潮。

        示例2:使偏移图像变的模糊

       偏移图像变模糊所需的代码如下:

 <!-- 使用模糊滤镜 stdDeviation设置模糊度 -->

<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>

         <feGaussianBlur>元素的stdDeviation属性定义了模糊量，0不模糊，数值越大越模糊

---

3、<feColorMatrix>

        <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。'0.2'矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0)

        示例4:为阴影涂上一层颜色
 

         阴影涂色所需要的代码为：

<!-- 通过values属性来控制阴影颜色 -->

<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="

        0.2 0 0 0 0  

        0 1 0 0 0 

        0 0 1 1 0 

        0 0 0 1 0"></feColorMatrix>

---

二、SVG渐变

        渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。SVG渐变主要有两种类型:

• Linear-线性的
• Radial-径向的

---

  1、<linearGradient>

        <linearGrarlent>元素用于定义线性渐变。
        <linearcradient>元素必须嵌套在<defs>标记内;<defs>标签是定义的缩写，包含特殊元素（例如渐变）的定义。

线性渐变可以定义为水平，垂直或角度渐变:

• 当y1和y2相等且x1和x2不同时，将创建水平渐变
• 当×1和x2相等且y1和y2不同时，将创建垂直渐变
• 当x1和×2不同且y1和y2不同时，将创建角度渐变示例1:用从黄色到红色的水平线性渐变定义一个椭圆

---

        示例1： 水平线性渐变

 

代码：

<svg>
    <defs>
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">
            <!-- 设置渐变色，使用stop标签 -->
            <stop offset="20%" stop-color="aquamarine"></stop>
            <stop offset="40%" stop-color="yellow"></stop>
            <stop offset="60%" stop-color="orange"></stop>
            <stop offset="80%" stop-color="yellowgreen"></stop>
            <stop offset="100%" stop-color="blue"></stop>
        </linearGradient>
    </defs>
    <!-- 矩形 -->
    <rect x="0" y="0" width="100" height="100" fill="url(#linear)" stroke="red"></rect>
</svg>

 

        2、 <radialGradient>

• <radialGradient>元素用于定义放射性渐变。
• <radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

        示例2:径向渐变

• cx/cy:表示的是颜色渐变的中心点坐标
• r :表示颜色渐变的范围
• fx/fy :表示的是渐变颜色的焦点坐标

 代码：

<svg>
    <defs>
        <radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="20%" stop-color="aquamarine"></stop>
            <stop offset="60%" stop-color="orange"></stop>
            <stop offset="100%" stop-color="blue"></stop>
        </radialGradient>
    </defs>
    <rect x="0" y="0" width="100" height="100" fill="url(#radial)" stroke="red"></rect>
</svg>