svg

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

svg标签上的属性

• width 和 height 属性可设置此 SVG 文档的宽度和高度。
• version 属性可定义所使用的 SVG 版本
• xmlns 属性可定义 SVG 命名空间
• viewBox属性定义svg的可见区域（viewBox=‘左上角横坐标x，左上角纵坐标y，宽度width，高度height’）
• preserveAspectRatio属性表示是否强制进行统一缩放
  preserveAspectRatio=‘xMidYMid meet’
  preserveAspectRatio属性的值为空格分隔的两个值组合而成，第一个值表示viewBox如何与svg viewport对齐；第二个值表示，如何维持高宽比
  其中第一个值由两部分组成，前半部分表示x方向对齐，后半部分表示y方向对齐

值	含义
xMin	viewport和viewBox左边对齐
xMid	viewport和viewBox x轴中心对齐
xMax	viewport和viewBox右边对齐
YMin	viewport和viewBox上边缘对齐。注意Y是大写
YMid	viewport和viewBox y轴中心点对齐。注意Y是大写
YMax	viewport和viewBox下边缘对齐。注意Y是大写

第二部分的值支持下面3个：
meet：保持纵横比缩放viewBox适应viewport
slice：保持纵横比同时比例小的方向放大填满viewport
none：扭曲纵横别以充分适应viewport

style样式

• fill定义填充的颜色：（rgb、颜色名、十六进制值）

• stroke-width定义矩形边框的高度

• stroke定义矩形边框的颜色

• stroke-linecap定义边框端点，可用值有（butt，round，spuare，inherit）

  
  1660377819865.png

• stroke-dasharray 用来创建虚线，可选值有（none，dasharray，inherit）
  *stroke-dashoffset 虚线的起始偏移，可选值有（百分比，长度，继承inherit）

• storke-linejoin定义描边转角的表现方式（miter，round，bevel，inherit）

  
  1660377839348.png

• stroke-miterlimit定义描边相交（锐角）的表现方式，默认值是4

• opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）

• stroke-opacity 表示描边透明度

• fill-opacity定义填充颜色透明度：（范围0-1）

例：

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <circle cx="100" cy="50" r="40" stroke="black"  stroke-width="2" fill="red"/>

</svg>

svg矩形

rect标签可创建一个矩形，或矩形的变种
例1：

<svg width="100%" height="100%" version="1.1">
    <!-- rect的width和height定义矩形的宽高-->
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

实现的效果如下：

1660269094403.png

例2：

<svg width="100%" height="100%" version="1.1">
 <!-- x定义矩形到左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
      y定义矩形到右侧位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
     -->
    <rect x="20" y="20" width="250" height="250"
    style="fill:blue;stroke:pink;stroke-width:5;
    fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

实现的效果如下：

1660272348494.png

例3：

<svg width="100%" height="100%" version="1.1">
   <!-- rx 和 ry 属性可使矩形产生圆角。-->
   <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/>
</svg>

实现的效果如下：

1660271286748.png

svg圆

circle标签可用来创建一个圆。
例1：

<svg width="100%" height="100%" version="1.1">
    <!-- cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
         r 属性定义圆的半径。-->
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

实现的效果如下：

1660271847212.png

svg椭圆

ellipse标签创建一个椭圆，椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的
例1：

<svg width="100%" height="100%" version="1.1">
    <!-- cx 和 cy 属性定义圆点的 x 和 y 坐标。rx定义水平半径 ry定义垂直半径-->
    <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

实现的效果如下：

1660272291565.png

svg线条

line标签用来创建线条
例1：

<svg width="100%" height="100%" version="1.1">
    <!-- x1定义x轴定义线条的开始，y1定义y轴定义线条的开始，
         x2定义x轴定义线条的结束，y2定义y轴定义线条的结束-->
    <line x1="0" y1="0" x2="300" y2="300"
    style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

实现的效果如下：

1660285370424.png

svg多边形

polygon标签创建含有不少于三个边的图形
例1：

<svg width="100%" height="100%" version="1.1">
  <!-- 定义每个角的x坐标和y坐标，x和y用逗号隔开，每个角之间的x和y用空格隔开-->
    <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>

实现的效果如下：

1660286052282.png

svg折线

polyline标签用来创建仅包含直线的形状
例1：

<svg width="100%" height="100%" version="1.1">
    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
</svg>

实现的效果如下：

1660293126998.png

text文本

text属性：

• x：表示文字左下角开始的x坐标
• y：表示文字左下角开始的y坐标
• fill：表示文字的填充颜色
• dx：文本在水平方向上移动的像素大小
• dy：文本在垂直方向上移动的像素大小
• text-anchor（文本相对基点x，y的位置）：start文字在基点的右上方；middle文字在基点的正上方；end文字在基点的左上方

text标签用来定义文字文本，在text中，我们可以使用tspan标签给文字分组，每个tspan标签可以定义自己的样式、格式或位置，我们还可以给文本添加超链接，这需要使用a标签
例1（tspan）：

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">这里有几行文字：
    <tspan x="10" y="45">这是第一行文字。</tspan>
    <tspan x="10" y="70">第二行文字在这里。</tspan>
  </text>
</svg>

实现的效果如下：

1660376952377.png

例2（a）：

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
   <a xlink:href="http://know.webhek.com/svg/"  target="_blank">
    <text x="0" y="15" fill="red">SVG是个好东西！</text>
  </a>
</svg>

实现的效果如下：

1660377015100.png

textPath文本路径

在svg例可以使用path定义一条路径，让文字沿着定义好的路径排列
例1：

<svg width="100%" height="100%" viewBox="0 0 1000 300"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <path id="MyPath"
      d="M 100 200 
         C 200 100 300   0 400 100
         C 500 200 600 300 700 200
         C 800 100 900 100 900 100" />
</defs>

<use xlink:href="#MyPath" fill="none" stroke="red"  />

<text font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
  我先往上去，然后往下去，然后再往上去，漂亮吧！
</textPath>
</text>

<rect x="1" y="1" width="998" height="298"
    fill="none" stroke="black" stroke-width="2" />
</svg>

实现的效果如下：

1660377177792.png

svg结构元素（本身没有效果）

use

use标签的作用是能从svg文档内部取出一个节点，克隆它，并把他输出到别处
例1：

<svg width="100%" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox='0 0 50 100'>
  <style>
    .classA { fill:red }
  </style> 
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>

  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
</svg>

实现的效果如下：

1660370873788.png

symbol

symbol标签作用定义一个图像模板，你可以用use实例化它，symbol本身不会输出任何图像，只有使用<use实例化后才会显示
例1：

<svg viewBox="0 0 150 150" height='300'>
  <symbol id="sym01" viewBox="0 0 150 110">
    <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
    <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
   </symbol>

  <use xlink:href="#sym01" x="0" y="0" width="100" height="50"/>
  <use xlink:href="#sym01" x="0" y="50" width="75" height="38"/>
  <use xlink:href="#sym01" x="0" y="100" width="50" height="25"/>
</svg>

实现的效果如下：

1660371307461.png

g

g标签就是group的简写，是用来分组的，她能把多个元素放在一组例，对g标记实施的样式和渲染会作用到这个分组内的所有元素上，组内的所有元素都有继承g标签上的所有属性，用个定义的分组还可以使用use进行复制使用
例1：

<svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg">
   <g stroke="green" fill="white" stroke-width="5">
     <circle cx="25" cy="25" r="15"/>
     <circle cx="40" cy="25" r="15"/>
     <circle cx="55" cy="25" r="15"/>
     <circle cx="70" cy="25" r="15"/>
   </g>
</svg>

实现的效果如下：

1660371891792.png

svg路径

path标签定义路径

下面的命令可用于路径数据：
M = moveto （Move to 代表起始位置, 出现在路径起始坐标之前）
L = lineto（Line to 代表使用直线连接到 L 后坐标的位置）
H = horizontal lineto（从当前点绘制一条水平线。H 等价于 y 值为 0 的 L 命令）
V = vertical lineto（从当前点绘制一条垂线。V 等价于 x 值为 0 的 L 命令）
C = curveto（从当前位置到位置(x, y)，绘制一条 三次贝塞尔曲线。（x1, y1) 是曲线起始位置的控制点；(x2, y2) 是曲线终止位置的控制点。）
S = smooth curveto（绘制从当前点到(x,y)的三次贝塞尔曲线。假设第一个控制点是相对于当前点的前一个命令的第二个控制点的反映。(如果没有先前的命令，或者先前的命令不是C、C、S或S，则假定第一个控制点与当前控制点重合。) (x2,y2)是第二个控制点(即曲线末端的控制点)。）
Q = quadratic Belzier curve（以(x1,y1)为控制点，绘制从当前点到(x,y)的二次贝塞尔曲线。）
T = smooth quadratic Belzier curveto（绘制从当前点到(x,y)的二次贝塞尔曲线。控制点被假定为控制点相对于当前点在前一个命令上的反映。(如果没有先前的命令，或者先前的命令不是Q、Q、T或T，则假设控制点与当前控制点重合。)）
A = elliptical Arc（弧形命令）
Z = closepath（close path 代表所绘制的是闭合路径，自动在最后一个点和起始点之间创建连线， 出现在结尾）

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

L, I, H, h, V, v lineto Command 用来画直线段
Z, z 用来闭合路径
三种绘制曲线的命令
C c S s Cubic Bezier 曲线：使用一个起始点，一个终止点以及两个控制点定义
Q q T t Quadratic Bezier 曲线：使用一个起始点，一个终止点以及一个控制点定义
A a Elliptical arc 曲线：截取椭圆的弧形成的曲线

例1：

 <svg width="900" height="100vh" version="1.1">
    <path d="M250 150 L150 350 L350 350 Z" />
</svg>

实现的效果如下：

1660352746837.png

例2：

<svg width="900" height="100vh" version="1.1">
    <path d="M153 334
     C153 334 151 334 151 334
     C151 339 153 344 156 344
     C164 344 171 339 171 334
     C171 322 164 314 156 314
     C142 314 131 322 131 334
     C131 350 142 364 156 364
     C175 364 191 350 191 334
     C191 311 175 294 156 294
     C131 294 111 311 111 334
     C111 361 131 384 156 384
     C186 384 211 361 211 334
     C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/>
</svg>

实现的效果如下：

1660352884457.png

clipPath

clipPath标签的作用相当于一个蒙版，它能限制哪些地方可见，哪些地方不可见，clipPath标签指定的区域之外的所有内容都不会被显示（图像不会被绘制出来）
clipPath元素需要使用clip-path属性来引用
例1：

<svg width="120" height="120"
 viewPort="0 0 120 120" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
   <defs>
      <clipPath id="myClip">
        <circle cx="30" cy="30" r="20"/>
        <circle cx="70" cy="70" r="30"/>
    </clipPath>
  </defs>

  <rect x="10" y="10" width="100" height="100"
      clip-path="url(#myClip)" fill='red' />
</svg>

实现的效果如下：

1660372465791.png

svg滤镜

filter标签用来定义svg滤镜，必须在defs标签中定义svg滤镜，defs标签是definitions，它允许对诸如滤镜等特殊元素进行定义
filter标签的id属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter：url属性用来把元素链接到滤镜，当链接滤镜id时，必须使用#字符

滤镜的属性：

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

in：

• 1.SourceGraphic：使用被作用滤镜元素自身的图像输入
• 2.SourceAlpha：使用被作用滤镜元素自身的图像输入，rgb值不被应用，只是用a（透明度），所以图像是黑色的
• 3.FillPaint：使用被作用滤镜元素自身的图像的填充颜色输入
• 4.StrokePaint：使用被作用滤镜元素自身的图像的填充颜色输入
• 5.BackgroundImage：使用被作用滤镜元素下层图片作为图像输入
• 6.BackgroundAlpha：使用被作用滤镜元素的下层图片作为图像输入，rgb值不被应用，只是用a（透明度），所以图像是黑色的

在 SVG 中，可用的滤镜有：

• feBlend（用于将两个图像或SVG片段组合为单个图形，与图像相结合的路径）
  属性：

  • 1.in它标识给定过滤器原语的输入
  • 2.in2标识给定过滤器原语的第二个输入。它具有与‘in’属性相同的值
  • 3.mode在feBlend过滤器原语上定义混合模式
    • 3-1：normal正常
    • 3-2：multiply正片叠底
    • 3-3：screen滤色
    • 3-4：darken变暗
    • 3-5：lighten变亮

• feColorMatrix（颜色滤镜，这个过滤器可以根据颜色矩阵来修改目标图形的色彩效果。每一个像素的颜色值(使用[R,G,B,A]矢量表示)乘以矩阵获得新的颜色值）

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting（光照滤镜，作用是产生光照效果滤镜，它使用原图的alpha通道作为纹理图，输出的结果取决于光线颜色，光源位置和图片的物体表面纹理）

• feDisplacementMap（位置替换滤镜，重新映射替换一个新的位置，形成一个新的图形。根据设定的通道颜色对原图的x, y坐标进行偏移，feDisplacementMap实际上是一个位置替换滤镜，就是改变元素和图形的像素位置的。

  map含义和ES5中数组的map方法是一样的，遍历原图形的所有像素点，使用feDisplacementMap重新映射替换一个新的位置，形成一个新的图形。

  因此，feDisplacementMap滤镜在业界的主流应用是对图形进行形变，扭曲，液化。）
  feDisplacementMap对图形进行位置隐射，有一个映射公式
  P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
  解释下：

  · P'(x,y)指的是转换之后的x, y坐标。
  · x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)指的是具体的转换规则。
  · XC(x,y)表示当前x,y坐标像素点其X轴方向上设置的对应通道的计算值，范围是0~1。
  · YC(x,y)表示当前x,y坐标像素点其Y轴方向上设置的对应通道的计算值，范围是0~1。
  · -0.5是偏移值，因此XC(x,y) - 0.5范围是-0.5~0.5，YC(x,y) - 0.5范围也是-0.5~0.5。
  · scale表示计算后的偏移值相乘的比例，scale越大，则偏移越大。
  再解释下就是根据设定的通道颜色对原图的x，y坐标进行偏移
  属性：

  • xChannelSelector对应XC（x，y）表示X轴坐标使用的是哪个颜色通道进行位置偏移，颜色有RGBA四个通道R代表红色，G代表绿色，B表示蓝色,A代表透明度，因此，xChannelSelector属性值可以是R、G、B、A中的任意一个，默认是A，基于透明度进行位置偏移。
  • yChannelSelector和xChannelSelector类似，只是一个是x轴（横轴）方向，一个是y轴（纵轴）方向。
  • color-interpolation-filters表示滤镜对颜色进行计算时采用的颜色模式类型，分为linearRGB（默认值，线性rgb颜色）和sRGB，sRGB是我们平常用的RGB颜色

• feFlood（生成一层连续的颜色）

  • x，y定义了x坐标和y坐标

• feGaussianBlur（高斯模糊）
  stdDeviation属性定义了模糊的程度

• feImage

• feMerge

• feMorphology

• feOffset（阴影）

• feSpecularLighting

• feTile

• feTurbulence（湍流滤镜，滤镜创建的图像效果采用的是Perlin湍流函数算法，可以生成Perlin Noise（Perlin噪声、柏林噪声）。用来实现云朵、大理石质感、烟雾、火焰等效果）
  支持下面五种属性：

  • baseFrequency：表示噪音的基本频率参数
  • numOctaves：倍频，可以理解为由频率和振幅定义的噪声函数eTurbulence滤镜效果就是通过频率增加而幅度减小的几个倍频叠加建立起来的。
    倍频的数量越多，噪声看起来越自然，但是也会带来更多的计算，对性能会产生负面影响
    *seed：表示feTurbulence滤镜效果中伪随机数生成的起始值，注意，是起始值，并不是随机数量。因此，不同数量的seed不会改变噪声的频率和密度，改变的是噪声的形状和位置。
    *stitchTiles：定义了Perlin噪声在边框处的行为表现
    支持两个属性值，分别是noStitch（默认值，svg中多个元素使用了feTurbulence滤镜效果，并且相连则边缘处明显）和statch（svg中多个元素使用了feTurbulence滤镜效果，并且相连则边缘处弱化）
  • type：turbulence（默认值，表示混乱，湍流）；fractalNoise（表示分型噪声）

• feDistantLight

• fePointLight

• feSpotLight

注释：您可以在每个 SVG 元素上使用多个滤镜！

例1（高斯模糊）：

<svg width="900" height="100vh" version="1.1">
    <defs>
        <filter id="Gaussian_Blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
    </defs>
        
    <ellipse cx="200" cy="150" rx="70" ry="40"
        style="fill:#ff0000;stroke:#000000;
        stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

实现的效果如下：

1660354054155.png

例2（颜色矩阵）：

<svg width="100%" height="100%" viewBox="0 0 150 360"

preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<text x="70" y="50">原图效果</text>
<g>
  <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
  <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
  <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
</g>


<text x="70" y="120">type="matrix"</text>

<filter id="colorMeMatrix">
  <feColorMatrix in="SourceGraphic"
  type="matrix"
  values="0 0 0 0 0
          1 1 1 1 0
          0 0 0 0 0
          0 0 0 1 0" />
</filter>

<g filter="url(#colorMeMatrix)">
  <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
  <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
  <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
</g>


<text x="70" y="190">type="saturate"</text>

<filter id="colorMeSaturate">
  <feColorMatrix in="SourceGraphic"
  type="saturate"
  values="0.2" />
</filter>

<g filter="url(#colorMeSaturate)">
  <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
  <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
  <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
</g>


<text x="70" y="260">type="hueRotate"</text>

<filter id="colorMeHueRotate">
  <feColorMatrix in="SourceGraphic"
  type="hueRotate"
  values="180" />
</filter>

<g filter="url(#colorMeHueRotate)">
  <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
  <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
  <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
</g>


<text x="70" y="320">type="luminanceToAlpha"</text>

<filter id="colorMeLTA">
  <feColorMatrix in="SourceGraphic"
  type="luminanceToAlpha" />
</filter>

<g filter="url(#colorMeLTA)">
  <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
  <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
  <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />
</g>
</svg>

1660375292771.png

注意：feColorMatrix标签里的type可以是matrix | saturate | hueRotate | luminanceToAlpha

例3（光照滤镜）：

<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
<text text-anchor="middle" x="60" y="22">原图</text>
<circle cx="60" cy="80" r="50" fill="green" />

<text text-anchor="middle" x="170" y="22">点状光</text>
<filter id="lightMe1">
  <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
    <fePointLight x="150" y="60" z="20" />
  </feDiffuseLighting>

  <feComposite in="SourceGraphic" in2="light"
             operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>

<circle cx="170" cy="80" r="50" fill="green" filter="url(#lightMe1)" />

<text text-anchor="middle" x="280" y="22">平行光</text>
<filter id="lightMe2">
  <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
    <feDistantLight azimuth="240" elevation="20"/>
  </feDiffuseLighting>

  <feComposite in="SourceGraphic" in2="light"
             operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>

<circle cx="280" cy="80" r="50" fill="green" filter="url(#lightMe2)" />

<text text-anchor="middle" x="390" y="22">聚光</text>
<filter id="lightMe3">
  <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
    <feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
               pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
  </feDiffuseLighting>

  <feComposite in="SourceGraphic" in2="light"
             operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>

<circle cx="390" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
</svg>

实现的效果如下：

1660376176513.png

例4（feTurbuleence滤镜实现水波倒影，水波效果需要js动态改变baseFrequency值来实现）：

css代码
.container {
  width: -moz-fit-content;
  width: fit-content;
  clip-path: inset(10px);
  background-color: #0E6CAA;
}
.reflect {
  transform: scaleY(-1);
  filter: url(#displacementFilter);
}
html代码
<svg width="0" height="0" style="posiotion:absolute;left:-999px;">
    <filter id="displacementFilter">
        <feTurbulence type="turbulence" baseFrequency="0.01 .1" numOctaves="1" result="turbulence" seed="53" />
        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="B" />
    </filter>
</svg>
<div class="container">
    <img src="./image/moon-night.jpg">
    <img src="./image/moon-night.jpg" class="reflect">
</div>
js代码
// 流动效果实现，通过改变baseFrequency属性值实现
var img = document.querySelector("#displacementFilter feTurbulence");
var frames = 0;
var rad = Math.PI / 180;

function AnimateBaseFrequency() {
  var bf = "0.01 .1";
  bfx = Number(bf.split(" ")[0]);
  bfy = Number(bf.split(" ")[1]);
  frames += .5
  bfx += 0.001 * Math.cos(frames * rad);
  bfy += 0.005 * Math.sin(frames * rad);

  bf = bfx.toString() + ' ' + bfy.toString();
  img.setAttributeNS(null, 'baseFrequency', bf);

  requestAnimationFrame(AnimateBaseFrequency);
}

window.requestAnimationFrame(AnimateBaseFrequency);

实现效果如下：

1660379619575.png

例5（feTurbuleence滤镜实现云朵）：

CSS代码：
/* 纯白色云朵 */
.cloud {
  width: 500px; height: 250px;
  margin: 3rem auto;
  position: relative;
}
.cloud:empty {
  filter: url(#cloudRandom);
  background: radial-gradient(closest-side, #fff var(--start-stop, 20%), #fffa var(--mid-stop, 60%), #fff0 80%);
  border-radius: 50%;
}
/* 带阴影的云朵 */
.cloud > i {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: 50%;
}
.cloud-basic {
  filter: url(#cloudBasic);
  background: radial-gradient(closest-side, #fff 60%, transparent 80%)
}
.cloud-mid {
  filter: url(#cloudShadow);
  background: radial-gradient(closest-side at 50% 60%, rgba(100, 90, 80, 0.2), transparent 60%);
}
.cloud-shadow {
  background: radial-gradient(closest-side at 50% 70%, rgba(0, 0, 0, 0.05), transparent 40%);
  filter: url(#cloudShadow);
}
HTML代码：
<svg width="0" height="0" style="position:absolute;">
  <filter id="cloudRandom">
    <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4"  seed="0" />     
    <feDisplacementMap in="SourceGraphic" scale="170" />
  </filter>
</svg>
<h4>纯白云层</h4>
<p><button id="buttonRandom">随机云朵</button></p>
<div class="cloud"></div>

<svg width="0" height="0" style="position:absolute;">
  <filter id="cloudBasic">
    <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="4" />     
    <feDisplacementMap in="SourceGraphic" scale="170" />
  </filter>
  <filter id="cloudShadow">
    <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="2" />     
    <feDisplacementMap in="SourceGraphic" scale="140" />
  </filter>
</svg>
<h4>带阴影云层</h4>
<p><button id="buttonRandom2">随机变化</button></p>
<div class="cloud">
  <i class="cloud-basic"></i>
  <i class="cloud-mid"></i>
  <i class="cloud-shadow"></i>
</div>
JS代码：
// 白色云朵的随机
var eleButton = document.getElementById('buttonRandom');
var eleTurbulence = document.querySelector('#cloudRandom feTurbulence');
eleButton.addEventListener('click', function () {
  var eleCloud = document.querySelector('.cloud:empty');
  eleCloud.style.setProperty('--start-stop', (10 + 20 * Math.random()) + '%');
  eleCloud.style.setProperty('--mid-stop', (50 + 20 * Math.random()) + '%');

  eleTurbulence.setAttributeNS(null, 'seed', Math.round(100 * Math.random()));
});

var eleButton2 = document.getElementById('buttonRandom2');
var eleTurbulenceA = document.querySelector('#cloudBasic feTurbulence');
var eleTurbulenceB = document.querySelector('#cloudShadow feTurbulence');
// 带阴影云朵的随机变化
eleButton2.addEventListener('click', function () {
  var seed = Math.round(100 * Math.random());
  eleTurbulenceA.setAttributeNS(null, 'seed', seed);
  eleTurbulenceB.setAttributeNS(null, 'seed', seed);
});

实现效果如下：

1660889612241.png

例6（feBlend滤镜实现文字纹理叠加）：

<svg width="360" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
   <filter id="blend">
   <feImage xlink:href="./pattern01.jpg" result="patternSource" x="0" y="0" width="360" height="120" />
   <!-- IE浏览器不支持overly混合模式，可使用multiply替代 -->              
   <feBlend mode="overlay" in="SourceGraphic" in2="patternSource" />
  </filter>
  <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%"   stop-color="green" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>
  <pattern id="pattern" width="360" height="120" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" filter="url(#blend)"></rect>
  </pattern>
  </defs>
<text x="0" y="60" font-family="Microsoft Yahei" font-size="60" font-weight="900" fill="url(#pattern)">
SVG纹理叠加
</text>
</svg>

实现效果如下：

1660890774384.png

svg线性渐变

svg渐变必须在defs标签中定义
linearGradient用来定义线性渐变，线性渐变可被定义为水平、垂直或角形的渐变渐变的颜色范围可以由两个或多个颜色组成，每个颜色通过stop标签来定义，offset 属性用来定义渐变的开始和结束位置。
当y1和y2相等，而x1和x2不同时，可创建水平的渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变
例1（水平渐变）:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <defs>
  <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
  <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
  </linearGradient>
  </defs>

<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>

</svg>

实现的效果如下：

1660894485132.png

svg放射性渐变

radialGradient用来定义放射性渐变，cx、cy和r定义外圈，而fx和fy定义内圈，每种颜色使用stop标签来规定，offset属性用来定义渐变的开始和结束位置
例1：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);  stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

</svg>

实现的效果如下：

1660894836557.png

a

用于创建到其他页面的超链接，功能于htmla标签类似
属性：
href：代表超链接引用，指向其他文档链接
download：指示浏览器下载文件
hreflang：是url的人类语言，或者简单地说，超链接指向的URL片段就是hreflang。
rel：它告诉目标文档和源文档之间的关系
traget：它告诉要在何处显示网页
type：它说明与url链接的文档的MIME类型
ping它是用空格分割的url列表

svg动画

Synchronized Multimedia Integration Language（同步多媒体集成语言，svg动画基于这种语言）
SMIL允许你做下面这些事：
动画元素的数值属性
动画属性变换
动画颜色属性
沿着运动路径运动
属性：

attributeName要设置动画的属性的名称
attributeType：css |xml | auto ，用来表明attributeName属性值的列表
from：属性的初始值
to：最终值
dur：动画的持续时间
repeatCount：次数|indefinite（无限次）
repeatDur：定义重复动画的总时间，可以是普通时间值或者indefinite
values：用分号分隔的一个或多个值
begin：动画开始时间，例1s，1h，1min，1000ms，1.5miu，01:30，cricle.click（事件）,x.repeat(2)（重复多少次执行），1997-07-16T19:20:30.45+01:00（时钟定义），indefinite（无限等待，需要beginElement()触发或指向该动画的超链接）
end：动画结束时间
calcMode：控制动画速率
discrete（from直接跳到to） | linear（animateMotion元素以外元素的calcMode默认值。动画从头到尾的速率都是一致的。） | paced（通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值，这样点之间“距离”的概念才能被计算（如position, width, height等）。如果”paced“指定，任何keyTimes或keySplines值都会打酱油。） | spline（通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值，这样点之间“距离”的概念才能被计算（如position, width, height等）。如果”paced“指定，任何keyTimes或keySplines值都会打酱油。）
keyTimes：关键时间点，分号分隔值（paced模式下，keyTimes会被忽略，keyTimes定义错误的话，也会被忽略；dur为indefinite也会被忽略）
keySplines：表示的是与keyTimes相关联的一组贝塞尔控制点（默认0 0 1 1），每个控制点使用4个浮点值来表示x1 y1 x2 y2，只有模式是spline时这个参数才有用，也是分号分隔值范围0~1，总是比keyTimes少一个值。如果keySplines值不合法或个数不对，是没有动画效果的。
fill：表示动画间隙的填充方式，支持的参数有freeze|remove，其中remove是默认值，表示动画结束之后直接回到开始的地方，freeze表示动画结束像是被冻住了
accumulate：none | sum，默认是none，如果是sum表示动画结束的位置作为下次动画的起始位置
additive控制动画是否附加，replace | sum，默认值是replace，如果值是sum表示动画的基础知识会附加到其他优先级的动画上
restart：always（默认值，总是） | whenNotActive（动画正在进行的时候不能重启动画） | never（表示动画是一波流）
min，max：表示动画执行最短和最长时间
动画的暂停与播放
// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations()

set

可以在指定的持续时间内设置属性的值

<set xmlns="http://www.w3.org/2000/svg" attributeName="x" attributeType="XML" to="60" begin="3s"/>

animate

使元素随时间而变化

例1（圆形和方形之间的转换动画）：

<svg width="500" height="500"> 
    <rect width="100" height="100">
        <animate attributeName="rx" values="0;50;0" dur="10s" repeatCount="indefinite" />
    </rect>
</svg> 

animateTransform

跟css的tranform变换是一种效果

animateMotion

可以让svg各种图形沿着特定的path路径运动
例1：

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
 <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
 </text>
 <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>