SVG(可缩放矢量图形)

重要通知

类目简介

基本概况

SVG(Scalable Vector Graphics)，即可缩放矢量图形，是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。

菜鸟教程: https://www.runoob.com/svg/svg-tutorial.htmlopen in new window
MDN: https://developer.mozilla.org/zh-CN/docs/Web/SVGopen in new window
SVGAElement: https://developer.mozilla.org/zh-CN/docs/Web/API/SVGAElementopen in new window
SVG Color Filter Playground: https://kazzkiq.github.io/svg-color-filter/open in new window

注意事项

必须设置<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>高度与宽度，否则<svg>内的图形宽高无效。

SVG模板

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> 
  
</svg>

SVG文件结构

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1190.25pt" height="1683.749945pt" viewBox="0 0 1190.25 1683.749945" version="1.2"></svg>


<?xml version="1.0" encoding="UTF-8"?>
<svg width="150px" height="160px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>切片</title>
  <defs>
    <rect id="path-1" x="0" y="0" width="13" height="13"></rect>
  </defs>
  <g id="首页、登录注册" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Home-page首页" transform="translate(-1132.000000, -7.000000)">
      <g id="置顶运营条" transform="translate(0.000000, -3.000000)">
        <g id="关闭" transform="translate(1132.000000, 10.500000)">
          <g transform="translate(1.000000, 1.000000)">
            <mask id="mask-2" fill="white">
              <use xlink:href="#path-1"></use>
            </mask>
            <g id="路径"></g>
            <path d="M0,13 L13,13 L13,0 L0,0 L0,13 Z" id="路径" fill-opacity="0.00849999964" fill="#FFFFFF" mask="url(#mask-2)"></path>
            <line x1="2.16666667" y1="2.16666667" x2="10.8333333" y2="10.8333333" id="路径-2" stroke-opacity="0.849999964" stroke="#FFFFFF" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0,0" mask="url(#mask-2)"></line>
            <line x1="2.16666667" y1="10.8333333" x2="10.8333333" y2="2.16666667" id="路径-3" stroke-opacity="0.849999964" stroke="#FFFFFF" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0,0" mask="url(#mask-2)"></line>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

坐标系统与坐标转换

坐标系统是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。

<svg width="300" height="300" viebox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> 
  <g transform="translate(0, 0)">
  <g transform="rotate(30)">
  <g transform="scale(.6, .6 )">
  <g transform="translate(100)">
  <g transform="skew(30)" transform="skewY(30)">
  <g transform="matrix(0.682, 0.731, -0.731, 0.682, 219.807, -81402)">
</svg>

JS动态创建SVG

const width = 100;
const height = 100;

const xmlns = "http://www.w3.org/2000/svg";
const svgEl = document.createElementNS(xmlns, "svg");

svgEl.setAttribute("width", width);
svgEl.setAttribute("height", height);
svgEl.setAttribute("viewbox", `0 0 ${width} ${height}`);

元素、属性与方法

常见SVG属性

----------------------------------------------------------------------------------
  属性            描述
----------------------------------------------------------------------------------
  id             元素的唯一标识符。
  class          元素的类名，用于CSS样式。
  style          元素的内联样式。
  transform      应用到元素上的变换。
  x, y           元素的位置。
  width, height  元素的尺寸。
  fill           填充颜色。
  stroke         描边颜色。
  stroke-width   描边宽度。
  opacity        透明度。
  visibility     元素的可见性。
----------------------------------------------------------------------------------

transform

可以在任何 SVG 元素上使用此属性，从 SVG2 开始，transform 为表现属性，这意味着它可以用作 CSS 属性。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g transform="rotate(-90)">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
  </g>
</svg>

clipPath

viewBox

视口盒子，即SVG内元素的视觉范围，类似于缩放渲染范围的功能

viewBox="
  min x, // 起始X坐标
  min y, // 起始Y坐标
  width, // 渲染区域范围宽度
  height // 渲染区域范围高度
  "

元素（Element）

`defs>`

<!--
  将引用元素定义在<defs>元素中，例如：altGlyphDef、clipPath、cursor、filter、linearGradient、marker、mask、pattern、radialGradient、symbol
-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id='Gradient'>
      <stop offset='20%' stop-color='#f00' />
      <stop offset='50%' stop-color='#0f0' />
    </linearGradient>
  </defs>

  <circle cx='' cy='' r='' fill='url(#Gradien)'></circle>
</svg>

`<desc>`与`<title>`

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>SVG</title>
  <desc>SVG</desc>
</svg>

`<g>`

<!--
  <g>元素是容器元素，把相关的图形元素组合起来，方便统一操作
-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g id=''>
    <circle></circle>
    <circle></circle>
  </g>
</svg>

`<image>`

<!--
  在SVG图像中嵌入位图
  x：图像水平方向上到原点的距离
  y：图像竖直方向上到原点的距离
  width：图像宽度。和HTML的<img>不同，该属性是必须的
  height：图像高度。和HTML的<img>不同，该属性是必须的
  xlink:href：图像的URL指向
  preserveAspectRatio：控制图像比例
-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <image x="10" y="0" width="100" height="100" preserveAspectRatio="true" xlink:href="../resource/example.jpg"></image>
  <image x="10" y="100" width="100" height="100" preserveAspectRatio="xMinYMin slice" xlink:href="../resource/example.jpg"></image>
  <image x="10" y="200" width="100" height="100" viewBox="50 50 50 50" xlink:href="../resource/example.jpg"></image>
</svg>

<!--
  案例：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506182064.html
  preserveAspectRatio的语法：preserveAspectRatio = defer? <align> <meetOrSlice>?  

  <align>align参数的值有分为两个部分，第一个部分指定X坐标的对齐方式，第二个部分指定Y坐标的对齐方式。
    
  X和Y对齐方式
  取值	描述
  xMin	viewBox的最小X值对齐viewport的左边部
  xMid	viewBox的X轴中点对齐viewport的X轴中点
  xMax	viewBox的最大X值对齐viewport的右边部
  YMin	viewBox的最小Y值对齐viewport的顶边
  YMid	viewBox的Y轴中点对齐viewport的Y轴中点
  YMax	viewBox的最大Y值对齐viewport的底边

  
  <align>取值
  xMinYMin：viewBox的<min-x>对齐viewport的最小X值，min-y对齐viewport的最小Y值。相当于backrgound-position: 0% 0%;。
  xMinYMid：viewBox的<min-x>对齐viewport的最小X值，viewBox的Y轴中点对齐viewport的Y轴中点。相当于backrgound-position: 0% 50%;。
  xMinYMax：viewBox的<min-x>对齐viewport的最小X值，min-y+<height>对齐viewport的最大Y值。相当于backrgound-position: 0% 100%;。
  xMidYMin：viewBox的X轴中点对齐viewport的X轴中点，min-y对齐viewport的最小Y值。相当于backrgound-position: 50% 0%;。
  xMidYMid（默认值）：viewBox的X轴中点对齐viewport的X轴中点，viewBox的Y轴中点对齐viewport的Y轴中点。相当于backrgound-position: 50% 50%;。
  xMidYMax：viewBox的X轴中点对齐viewport的X轴中点，min-y+<height>对齐viewport的最大Y值。相当于backrgound-position: 50% 100%;。
  xMaxYMin：viewBox的<min-x>+<width>对齐viewportX轴的最大值，min-y对齐viewport的最小Y值。相当于backrgound-position: 100% 0%;。
  xMaxYMid：viewBox的<min-x>+<width>对齐viewportX轴的最大值，viewBox的Y轴中点对齐viewport的Y轴中点。相当于backrgound-position: 100% 50%;。
  xMaxYMax：viewBox的<min-x>+<width>对齐viewportX轴的最大值，min-y+<height>对齐viewport的最大Y值。相当于backrgound-position: 100% 100%;。



  <meetOrSlice>取值
  取值	描述
  meet	保持宽高比并将viewBox缩放为适合viewport的大小
  slice	保持宽高比并将所有不在viewport中的viewBox剪裁掉
  none	不保存宽高比。缩放图像适合整个viewbox，可能会发生图像变形
-->

`<symbol>`

<!--
  <symbol>元素定义了图形模板对象，供<use>元素通过实例化的方法引用
-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <symbol id='Symbol'>
      <rect x='1' y='1' width='50' height='50' />
    </symbol>
  </defs>

  <use x='45' y='45' width='10' height='10' xlink:href='#Symbol'></use>
</svg>

`<use>`

<!--
  引用作用，被引用的元素不会继承<use>元素本身和其父元素的属性
  拷贝
-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <rect id="Rect" width="100" height="100" />
  </defs>
  <use x="20" y="20" xlink:href="#Rect" />
</svg>

基础图形

线段与直线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

多线段

矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="2.5" y="2.5" width="95" height="95" style="fill:blue;stroke:pink;stroke-width:5;"/>
</svg>

圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

多边形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

曲线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

路径

路径命令

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

<path
  d="path-data"            <!-- 定义路径的路径数据 -->
  fill="fill-color"        <!-- 路径的填充颜色 -->
  stroke="stroke-color"    <!-- 路径的描边颜色 -->
  stroke-width="width"     <!-- 路径的描边宽度 -->

  <!--实际语法-->
  style="fill:;stroke:;stroke-width:;"
/>

<path
  d="
    M = moveto                          // 起始移动点，例如：M 10 10 
    L = lineto                          // 移动到指定点，例如：L 10 20
    H = horizontal lineto               // H（水平），例如：
    V = vertical lineto                 // V（垂直），例如：
    C = curveto                         // C（三次贝塞尔曲线），例如：C 40 10, 65 10, 95 80
    S = smooth curveto                  // S（光滑曲线），例如：S 150 150, 180 80
    Q = quadratic Bézier curve          // Q（二次贝塞尔曲线），例如：Q 150 -300 300 0
    T = smooth quadratic Bézier curveto // T（光滑二次贝塞尔曲线），例如：
    A = elliptical Arc                  // A（圆弧），例如：A 30 50 0 0 1 162.55 162.45
    Z = closepath                       // Z（关闭路径），例如：Z   
  "
/>

<path
  d="
    M x y                               // x坐标, y坐标
    L x y                               // 
    H x              // 
    V y
    C x₁ y₁, x₂ y₂, x y                  // （x₁,y₁）控制点起始坐标，（x₂,y₂）控制点结束坐标，（x,y）曲线的终点
    S
    Q x₁ y₁, x y                         // （x₁,y₁）控制点坐标，（x,y）曲线的终点
    T 
    A rx ry x-axis-rotation large-arc-flag sweep-flag x y
    Z   
  "
/>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

绘制正方形

<svg width="200" height="200" stroke="rgba(153, 153, 153, 1)" stroke-width="5" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 V0 200 H200 200 V200 0 H0 0" stroke="blue" stroke-width="10" fill="none" />
</svg>

绘制圆

可以使用两次来实现，每次绘制一个半圆即可，因为path绘制一个满圆有问题。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path
    d="M 200 100
        A 100 100, 0, 1, 1, 0 100
        A 100 100, 0, 1, 1, 200 100
        Z
      "
    fill="blue"
  />
</svg>

椭圆弧曲线

严重依赖M或L的坐标点，由此形成视觉上的弧。

注意关闭路径问题，容易造成视觉上的混乱与干扰。

<!--
  rx: 椭圆弧的x 轴半径（长半径）
  ry: 椭圆弧的y 轴半径（短半径）
  x-axis-rotation: 此弧段所在的椭圆的x 轴旋转角度 
  large-arc-flag: 角度大小，决定弧线是大于还是小于180度，0 表示小角度弧，1 表示大角度弧。
  sweep-flag: 弧线方向，0 表示从起点到终点沿逆时针画弧，1 表示从起点到终点沿顺时针画弧。 
  x: 椭圆弧的终点x坐标
  y: 椭圆弧的终点y坐标
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path
    d="M 80 80
       A 45 45, 0, 0, 0, 125 125
       L 125 80 
       Z
      "
    fill="green"
  />
</svg>

二次方贝塞尔曲线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path
    d="M 0 100 Q 100 0, 200 100 Z"
    style="stroke: rgb(255, 0, 0); stroke-width: 2"
  />
</svg>

三次方贝塞尔曲线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path
    d="M 0 100 C 0 100, 100 0, 200 100 Z"
    style="stroke: rgb(255, 0, 0); stroke-width: 2"
  />
</svg>

文本

代码示例

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

  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>

</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

字体长度

SVGTextElement.getBBox() ==> 然后得到宽和高
SVGTextElement.getComputedTextLength(): 得到宽的函数，貌似没有得到高的函数...(我把 SVGTextElement 的所有属性都打印出来了，貌似也没找到对应的计算高的函数)

渐变（Gradient）

代码示例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  
  <defs>
    <!--线性渐变：linearGradient-->

    <!--水平-->
    <linearGradient id="grad1" 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>
    <!--对角-->
    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
      <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>
    <!--垂直-->
    <linearGradient id="grad3" x1="0%" y1="0%" x2="0" y2="100%">
      <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>


    <!--放射性渐变：radialGradient-->
    <!--CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆-->
    <radialGradient id="grad-1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
    <radialGradient id="grad-2" cx="50%" cy="50%" r="50%" fx="0" fy="0">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
    <radialGradient id="grad-3" cx="100%" cy="100%" r="100%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>

  </defs>

  <ellipse cx="150" cy="70" rx="100" ry="35" fill="url(#grad1)" />
  <ellipse cx="150" cy="170" rx="100" ry="35" fill="url(#grad2)" />
  <ellipse cx="150" cy="270" rx="100" ry="35" fill="url(#grad3)" />

  <ellipse cx="150" cy="370" rx="100" ry="35" fill="url(#grad-1)" />
  <ellipse cx="150" cy="470" rx="100" ry="35" fill="url(#grad-2)" />
  <ellipse cx="150" cy="570" rx="100" ry="35" fill="url(#grad-3)" />

</svg>

动画（Animate）

<animate>：改变数值的属性或样式的值。
<set>：改变非数值的属性或样式的值，如visibility属性等。
<animateMotion>：沿着某路径移动SVG元素获得动画效果。
<animateColor>：改变某些元素与颜色有关的属性或样式的值。
<animateTransform>：改变SVG元素进行坐标变换时候的动画效果。

`<animate>`

改变数值的属性或样式的值。

<animate
  attributeName="目标属性名称"
  attributeType="XML | CSS auto" // 指明产生动画效果的属性或样式值是在哪个命名空间定义的
  from="起始值"
  to="结束值"
  dur="持续时间"
  begin="定义动画的开始时刻"
  repeatCount="定义动画重播次数" // 'indefinite'-无限重复播放次数
  fill="定义动画播放完毕后是停留在播放的终点还是回到起始位置" // 'freeze'-表示凝固在播放的终点 | 'remove'-表示移除所有内容回到播放的起点
></animate>

`<set>`

改变非数值的属性或样式的值，如visibility属性等。

`<animateMotion>`

沿着某路径移动SVG元素获得动画效果。

<animateMotion
	calcMode="动画的插补模式。可以是'discrete', 'linear', 'paced', 'spline'"
  path="运动路径"
  keyPoints="沿运动路径的对象目前时间应移动多远"
  rotate="应用旋转变换"
  xlink:href="一个URI引用<path>元素，它定义运动路径"
>
</animateMotion>

`<animateColor>`

改变某些元素与颜色有关的属性或样式的值。

<animateColor
	by="相对偏移值"
  from="起始值"
  to="结束值"
  values=""
>
</animateColor>

`<animateTransform>`

改变SVG元素进行坐标变换时候的动画效果。

<animateTransform
  by="相对偏移值，即步长值"
  from="起始值"
  to="结束值"
  type="类型的转换其值是随时间变化。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'"
>
</animateTransform>

实现案例

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>

  <rect width="90" height="90" x="0" y="0" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)">
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="300" repeatCount="indefinite" /> 
  </rect>

  <path d="M150 0 L75 200" stroke="red">
    <animate attributeName="stroke" attributeType="XML" begin="0s" dur="6s"  from="red" to="blue" fill="freeze" repeatCount="indefinite" /> 
  </path>


  <ellipse cx="300" cy="80" rx="100" ry="100" style="fill:transparent;stroke:purple;stroke-width:1;s">
    <animate attributeName="rx" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="2500" repeatCount="indefinite" /> 
    <animate attributeName="ry" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="2500" repeatCount="indefinite" /> 
  </ellipse>
</svg>

事件（Event）

滤镜（Filter）

https://github.com/Startupeando/SVG-FILTERS
http://jorgeatgu.github.io/svg-filters/
https://kazzkiq.github.io/svg-color-filter/
https://gianlucaguarini.com/Vague.js/

语法结构

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!--<filter id="filter-id">元素定义在<defs>内-->
  <!--引用滤镜：<rect style="filter:url(#filter-id)">-->
  <defs>
    <!-- 属性
      id：定义滤镜名字，提供给引用时使用
      x：定义滤镜所作用的矩形区域左上角的X轴坐标，单位由filterUnits属性决定
      y：定义滤镜所作用的矩形区域左上角的Y轴坐标，单位由filterUnits属性决定
      width：定义滤镜所作用的矩形区域的宽度
      height：定义滤镜所作用的矩形区域的高度
      filterUnits：定义滤镜所作用的矩形区域坐标值的长度单位，默认值为ObjectBoundingBox。userSpaceOnUse，表示长度单位取决于该<filter>元素所在的用户坐标系；ObjectBoundingBox，表示长度单位以引用该<filter>元素的图形对象的外边框为参考坐标系
      primitiveUnits：定义滤镜中各基本滤镜变换所使用的坐标长度单位
    -->
    <filter id="filterID" x="" y="" width="" height="" filterUnits="userSpaceOnUse | ObjectBoundingBox">
      <!-- 基本滤镜变换元素
        @
        x：定义基本滤镜变换所作用的矩形区域左上角的X轴坐标，坐标单位由父元素<filter>的primitiveUnits属性决定，默认值为-10%
        y：定义基本滤镜变换所作用的矩形区域左上角的Y轴坐标，默认值为-10%
        width：定义滤镜变换所作用的矩形区域的宽度，默认值为120%
        height：定义滤镜变换所作用的矩形区域的高度，默认值为120%
        result：定义滤镜变换所作用后的结果，这个结果值提供给下一步或者以后各步的变换来使用
      -->
      <!-- in属性：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <result-name>，定义该变换所使用的输入源。该属性取值可以是属性result的取值
        @
        SourceGraphic：RGB通道，引用了该滤镜的图元。比如一个<rect>引用了该滤镜,那么Soureegraphic”表示这个矩形的可视化部分
        SourceAlpha：Alpha通道，引用了该滤图元的透明度。SvG中的可见元都是四通道图像,也就是RGB通道加上 Alpha通道。在实际渲染时,alpl通道由与图像中每个非白色像素对应的黑色像素组成,也就是一种灰度图像SVG开发实践
        Backgroundage：引用了该滤图元的显示区域,包指背景,这就意味着滤错效果将作用在这个图元显示区域内的所有元素,面不仅仅是该图元本身
        Rackiwoundalpha：显示区域内所有元素的透明度
        Fillpaint：引用了该滤图元的填充区域
        Strokepaint：引用了该选镜图元的描边区
      -->
      <!--模糊效果 | 高斯模糊-->
      <feGaussianBlur stdDeviation="number, 定义X轴与Y轴上的模糊程度，值越大越模糊，例如(x, y)"></feGaussianBlur>
      <!--阴影效果-->
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <!--图像混合模式--><!--in2="offOut"继承上一个变换-->
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
      <!--亮度 | 对比度 | 灰度 | 色相旋转 | 反色 | 饱和度-->
      <!--type：matrix | saturate | hueRotate | luminanceToAlpha-->
      <feColorMatrix type=""></feColorMatrix>
      <!--亮度 | 对比度 | 透明度-->
      <feComponentTransfer type=""></feComponentTransfer>
      <!--feComponentTransfer 的子元素-->
      <feFuncA></feFuncA>
      <feFuncB></feFuncB>
      <feFuncG></feFuncG>
      <feFuncR></feFuncR>
      <!--黑光-->
      <!--曝光-->
      <!--柔和-->
      <!--软焦点-->
      <!--油画-->
      <!--浮雕-->
      <!--碎片-->
      <!--撕裂边-->
      <!--图像合成模式-->
      <feComposite type=""></feComposite>        
      <!--锐化-->
      <feConvolveMatrix type=""></feConvolveMatrix>
      <feConvolveMatrix order="3 3" divisor="1" in="SourceGraphic" targetX="1" targetY="1" kernelMatrix="0 -0.15 0 -0.15 1.6 -0.15 0 -0.15 0"/>
      <!--光照滤镜：产生光照效果滤镜，它使用原图的alpha通道作为纹理图，输出的结果取决于光线颜色，光源位置和图片的物体表面纹理。
        @
        产生点光、平行光、聚光照射的滤镜效果。
      -->
      <feDiffuseLighting type=""></feDiffuseLighting>
      <!--镜面反射-->
      <feSpecularLighting type=""></feSpecularLighting>
      <!---->
      <feDisplacementMap type=""></feDisplacementMap>
      <!--无限填充-->
      <feFlood flood-color='' flood-opacity=''></feFlood>
      <!---->
      <feImage type=""></feImage>
      <!--图像合并-->
      <feMerge type=""></feMerge>        
      <!--扩边与缩放效果-->
      <feMorphology type=""></feMorphology>
      <!--图像平铺-->
      <feTile type=""></feTile>
      <!---->
      <feTurbulence type="" baseFrequency="" numOctaves="" seed="" stitchTiles=""></feTurbulence>     
      <!--水波絮流特效：https://wow.techbrood.com/fiddle/30865-->   
      <!--平行光源-->
      <feDistantLight type=""></feDistantLight> 
      <!--点光源-->
      <fePointLight type=""></fePointLight> 
      <!--聚光灯光源-->
      <feSpotLight type=""></feSpotLight> 
    </filter>
  </defs>

  <!--引用滤镜-->
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filterID)" />
</svg>

饱和度

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="filter" color-interpolation-filters="sRGB">
      <feComponentTransfer></feComponentTransfer>
      <feColorMatrix type="matrix" values="111"></feColorMatrix>
    </filter>
  </defs>
  <image xlink:href="../../../Reference/images/screen.jpg" width="300" height="240" filter="url(#filter)"></image>
</svg>

<span>灰度：</span>
<input type="range" oninput="changeGray(this.value)">
<span>强度：</span>
<input type="range" oninput="changeStrength(this.value)">

<!-- 色彩矩阵 5 x 4 矩阵 -->
<script type="text/javascript">
  const range = document.getElementsByTagName('input');
  const saturation = document.getElementsByTagName('feColorMatrix')[0];

  range[0].setAttribute('value', 100);
  range[1].setAttribute('value', 0);
  changeGray(100);

  //灰度
  function changeGray(value) {
    value = value / 100;
    const rectify = 1 - value;
    const matrix = `` +
      `${0.213 * rectify + value} ${0.715 * rectify} ${0.072 * rectify} 0 0 ` +
      `${0.213 * rectify} ${0.715 * rectify + value} ${0.072 * rectify} 0 0 ` +
      `${0.213 * rectify} ${0.715 * rectify} ${0.072 * rectify + value} 0 0 ` +
      `0 0 0 1 0`;
    saturation.setAttribute('values', matrix);
  }

  // 强度
  function changeStrength(value) {
    value = value / 100;
    value = value + 1;
    const rectify = 1 - value;
    const matrix = `` +
      `${0.213 * rectify + value} ${0.715 * rectify} ${0.072 * rectify} 0 0 ` +
      `${0.213 * rectify} ${0.715 * rectify + value} ${0.072 * rectify} 0 0 ` +
      `${0.213 * rectify} ${0.715 * rectify} ${0.072 * rectify + value} 0 0 ` +
      `0 0 0 1 0`;
    saturation.setAttribute('values', matrix);
  }
</script>

经典示例

<svg width='500' height='1000' xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>
    <!---->
    <filter id="standard">
      <feColorMatrix type="matrix" 
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0 "/>
    </filter>
    <!--亮度-->
    <filter id="brightness">
      <feColorMatrix type="matrix" 
        values="0.5 0 0 0 0
                0 0.5 0 0 0
                0 0 0.5 0 0
                0 0 0   1 0 "/>
    </filter>
    <!--对比度-->
    <filter id="contrast">
      <feColorMatrix type="matrix" 
        values="2 0 0 0 -0.25
                0 2 0 0 -0.25 
                0 0 2 0 -0.25
                0 0 0 1  0 "/>
    </filter>
    <!--透明度-->
    <filter id="opacity">
      <feColorMatrix type="matrix" 
      values="1 0 0 0   0 
              0 1 0 0   0 
              0 0 1 0   0 
              0 0 0 0.5 0 "/>
    </filter>
    <!--饱和度-->
    <filter id="saturate">
      <feColorMatrix in="SourceGraphic" type="saturate" values="4" />
    </filter>

  </defs>

  <image x="10" y="0" width="100" height="100" filter="url(#standard)" xlink:href="../resource/example.jpg"></image>
  <image x="10" y="100" width="100" height="100" filter='url(#brightness)' xlink:href="../resource/example.jpg"></image>
  <image x="10" y="200" width="100" height="100" filter='url(#contrast)' xlink:href="../resource/example.jpg"></image>

  <image x="10" y="300" width="100" height="100" filter='url(#opacity)' xlink:href="../resource/example.jpg"></image>
  <image x="10" y="400" width="100" height="100" filter='url(#saturate)' xlink:href="../resource/example.jpg"></image>
  <image x="10" y="500" width="100" height="100" xlink:href="../resource/example.jpg"></image>

  <image x="10" y="600" width="100" height="100" xlink:href="../resource/example.jpg"></image>
  <image x="10" y="700" width="100" height="100" xlink:href="../resource/example.jpg"></image>
  <image x="10" y="800" width="100" height="100" xlink:href="../resource/example.jpg"></image>

  <image x="10" y="900" width="100" height="100" xlink:href="../resource/example.jpg"></image>
</svg>

SVG绘制各种图标

绘制关闭ICON

<style type="text/css">
svg {
  stroke: #fff;
}
svg:hover {
  stroke: #f00;
}
</style>

<svg
  width="14"
  height="14"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  viewBox="0 0 14 14"
  style="background-color: transparent"
>
  <g transform="rotate(-45)" transform-origin="7 7">
    <path d="M 0 7 L 14 7 Z M 7 0 L 7 14 Z" fill="#fff" stroke-width="2" />
  </g>
</svg>

成功-勾

<style type="text/css">
body {
  background-color: rgba(0, 0, 0, 1);
}
svg {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

svg {
  stroke: #fff;
}
svg:hover {
  stroke: #f00;
}
</style>

<svg
  width="18"
  height="18"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  viewBox="0 0 18 18"
  style="background-color: transparent"
>
  <g transform="rotate(-45) translate(-1, 4)" transform-origin="9 9">
    <path d="M 4 7 L 18 7 Z M 5 0 L 5 7 Z" fill="#fff" stroke-width="2" />
  </g>
</svg>

插件体系

svg.colorat.js

svg.draggable.js

svg.easing.js

svg.filter.js

svg.math.js

svg.panzoom.js

svg.path.js

svg.shapes.js

svg.topath.js

svg.topoly.js

ngx-svg

SVG.js

SVG.js是一个用于操作和动画 SVG 的轻量级库。

官网：https://svgjs.dev/docs/3.0/open in new window
GitHub：https://github.com/svgdotjs/svg.jsopen in new window

安装配置

> npm install @svgdotjs/svg.js

代码示例

import { SVG, extend as SVGextend, Element as SVGElement } from '@svgdotjs/svg.js'

const draw = SVG().addTo('#drawing');
const rect = draw.rect(100, 100).fill('#f06');

SVG()函数

// new document
var draw = SVG()
// get rect from dom
var rect = SVG('#myRectId')
// or
var rect = SVG('rect')
// any css selector will do
var path = SVG('#group1 path.myClass')
// create new object from fragment
var circle = SVG('<circle>')
// convert node to svg.js object
var obj = SVG(node)

# SVG(可缩放矢量图形)

# 基本概况

# 注意事项

# SVG模板

# SVG文件结构

# 坐标系统与坐标转换

# JS动态创建SVG

# 元素、属性与方法

# 常见SVG属性

# transform

# clipPath

# viewBox

# 元素（Element）

# defs>

# <desc>与<title>

# <g>

# <image>

# <symbol>

# <use>

# 基础图形

# 线段与直线

# 多线段

# 矩形

# 圆形

# 椭圆

# 多边形

# 曲线

# 路径

# 路径命令

# 绘制正方形

# 绘制圆

# 椭圆弧曲线

# 二次方贝塞尔曲线

# 三次方贝塞尔曲线

# 文本

# 代码示例

# 字体长度

# 渐变（Gradient）

# 代码示例

# 动画（Animate）

# <animate>

# <set>

# <animateMotion>

# <animateColor>

# <animateTransform>

# 实现案例

# 事件（Event）

# 滤镜（Filter）

# 语法结构

# 饱和度

# 经典示例

# SVG绘制各种图标

# 绘制关闭ICON

# 成功-勾

# 插件体系

# svg.colorat.js

# svg.draggable.js

# svg.easing.js

# svg.filter.js

# svg.math.js

# svg.panzoom.js

# svg.path.js

# svg.shapes.js

# svg.topath.js

# svg.topoly.js

# ngx-svg

# SVG.js

# 安装配置

# 代码示例

# SVG()函数

SVG(可缩放矢量图形)

基本概况

注意事项

SVG模板

SVG文件结构

坐标系统与坐标转换

JS动态创建SVG

元素、属性与方法

常见SVG属性

transform

clipPath

viewBox

元素（Element）

`defs>`

`<desc>`与`<title>`

`<g>`

`<image>`

`<symbol>`

`<use>`

基础图形

线段与直线

多线段

矩形

圆形

椭圆

多边形

曲线

路径

路径命令

绘制正方形

绘制圆

椭圆弧曲线

二次方贝塞尔曲线

三次方贝塞尔曲线

文本

代码示例

字体长度

渐变（Gradient）

代码示例

动画（Animate）

`<animate>`

`<set>`

`<animateMotion>`

`<animateColor>`

`<animateTransform>`

实现案例

事件（Event）

滤镜（Filter）

语法结构

饱和度

经典示例

SVG绘制各种图标

绘制关闭ICON

成功-勾

插件体系

svg.colorat.js

svg.draggable.js

svg.easing.js

svg.filter.js

svg.math.js

svg.panzoom.js

svg.path.js

svg.shapes.js

svg.topath.js

svg.topoly.js

ngx-svg

SVG.js

安装配置

代码示例

SVG()函数