1. SVG 邂逅

1.1 什么是 SVG ？

什么是SVG？维基百科介绍：

SVG 全称为（Scalable Vector Graphics），即可缩放矢量图形。（矢量定义：既有大小又有方向的量。在物理学中称作矢量，如一个带箭头线段：长度表示大小，箭头表示方向；在数学中称作向量。在计算机中，矢量图可无限放大而不变形）
SVG 是一种基于XML格式的矢量图，主要用于定义二维图形，支持交互和动画。
SVG 规范是万维网联盟(W3C) 自 1998 年以来开发的标准。
SVG 图像可在不损失质量的情况下按比例缩放，并支持压缩。
基于XML的SVG可轻松的用文本编辑器或矢量图形编辑器创建和编辑，并可以直接在浏览器显示。

1.2 SVG 的历史

SVG1.x 版本

SVG 是 W3C SVG工作组于 1998 年开始开发，而 SVG 1.0于 2001 年 9 月 4 日成为W3C 推荐的标准。
SVG 1.1 于 2003 年 1 月 14 日成为 W3C 推荐的标准。该版本增加了模块化规范的内容。除此之外，1.1 和 1.0 几乎没有区别。
SVG Tiny 1.2 于 2008 年 12 月 22 日成为 W3C 推荐标准，主要是为性能低的小设备生成图形，但是后来被 SVG 2 所弃用了。
SVG 1.1 第二版于 2011 年 8 月 16 日发布，这次只是更新了勘误表和说明，并没有增加新功能。

SVG 2.0 版本（推荐）

SVG 2.0于2016 年 9 月 15 日成为W3C 候选推荐标准，最新草案于2020年5月26日发布。

1.3 SVG 的优缺点

优点：

扩展好：矢量图像在浏览器中放大缩小不会失真，可被许多设备和浏览器中使用。而光栅图像（PNG 、JPG）放大缩小会失真。

矢量图像是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小是不会失真的。
光栅图像是由像素点构建的图像——微小的彩色方块，大量像素点可以形成高清图像，比如照片。图像像素越多，质量越高。

灵活：SVG是W3C开发的标准，可结合其它的语言和技术一起使用，包括 CSS、JavaScript、 HTML 和 SMIL 。SVG图像可以直接使用JS和CSS进行操作，使用时非常方便和灵活，因为SVG也是可集成到 DOM 中的。 3、 可以动画：SVG 图像可以使用 JS 、 CSS 和 SMIL 进行动画处理。对于 Web 开发人员来说非常的友好。
轻量级：与其它格式相比，SVG 图像的尺寸非常小。根据图像的不同，PNG 图像质量可能是 SVG 图像的 50 倍。
可打印：SVG 图像可以以任何分辨率打印，而不会损失图像质量。
利于SEO：SVG 图像被搜索引擎索引。因此，SVG 图像非常适合 SEO（搜索引擎优化）目的。
可压缩：与其它图像格式一样，SVG 文件支持压缩。
易于编辑：只需一个文本编辑器就可以创建 SVG 图像。设计师通常会使用 Adobe Illustrator （AI）等矢量图形工具创建和编辑。

缺点：

不适和高清图片制作
- SVG 格式非常适合用于徽标和图标（ICON）等 2D 图形，但不适用于高清图片，不适合进行像素级操作。
- SVG 的图像无法显示与标准图像格式一样多的细节，因为它们是使用点和路径而不是像素来渲染的。
SVG 图像变得复杂时，加载会比较慢
不完全扩平台
- 尽管 SVG 自 1998 年以来就已经存在，并得到了大多数现代浏览器（桌面和移动设备）的支持，但它不适用于 IE8 及更低版本的旧版浏览器。根据caniuse的数据，大约还有 5% 的用户在使用不支持 SVG 的浏览器。

1.4 应用场景

SVG 非常适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。
SVG 适合应用在需适配多种尺寸的屏幕上展示，因为SVG的扩展性更好。
当需要创建简单的动画时，SVG 是一种理想的格式。
SVG 可以与 JS 交互来制作线条动画、过渡和其他复杂的动画。
SVG 可以与 CSS 动画交互，也可以使用自己内置的 SMIL 动画。
SVG 也非常适合制作各种图表（条形图、折线图、饼图、散点图等等），以及大屏可视化页面开发。

1.5 SVG 和 Canvas 的区别

可扩展性：
- SVG 是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小不会失真。
- Canvas 是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化（模糊）。
- SVG可以在任何分辨率下以高质量的打印。Canvas 不适合在任意分辨率下打印。
渲染能力：
- 当 SVG 很复杂时，它的渲染就会变得很慢，因为在很大程度上去使用 DOM 时，渲染会变得很慢。
- Canvas 提供了高性能的渲染和更快的图形处理能力，例如：适合制作H5小游戏。
- 当图像中具有大量元素时，SVG 文件的大小会增长得更快（导致DOM变得复杂），而Canvas并不会增加太多。
灵活度：
- SVG 可以通过JavaScript 和 CSS 进行修改，用SVG来创建动画和制作特效非常方便。
- Canvas只能通过JavaScript进行修改，创建动画得一帧帧重绘。
使用场景：
- Canvas 主要用于游戏开发、绘制图形、复杂照片的合成，以及对图片进行像素级别的操作，如：取色器、复古照片。
- SVG 非常适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。

1.6 一份 SVG 代码

svg
<?xml version="1.0" standalone="no" ?>
<svg
 width="100"
 height="100"
 xmlns="http://www.w3.org/2000/svg"
>
  <rect x="0" y="0" width="100" height="100"></rect>
</svg>

2. SVG 基础

2.1 SVG Grid 和坐标系

SVG 使用的 坐标系统（网格系统） 和 Canvas的差不多。坐标系是 以左上角为 (0,0) 坐标原点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。

SVG Grid（坐标系）

<svg> 元素默认宽为 300px, 高为 150px。
通常来说网格中的一个单元相当于 svg 元素中的一像素。
基本上在 SVG 文档中的 1 个像素对应输出设备（比如显示屏）上的 1 个像素（除非缩放）。
<svg> 元素和其它元素一样也是有一个坐标空间的，其原点位于元素的左上角，被称为初始视口坐标系
<svg>的 transform 属性可以用来移动、旋转、缩放SVG中的某个元素，如<svg>中某个元素用了变形，该元素内部会建立一个新的坐标系统，该元素默认后续所有变化都是基于新创建的坐标系统。

2.2 SVG 坐标系单位

SVG坐标系统，在没有明确指定单位时，默认以像素为单位。

比如：<rect x="0" y="0" width="100" height="100" />

定义一个矩形，即从左上角开始，向右延展 100px，向下延展 100px，形成一个 100*100 大的矩形。

当然我们也可以手动指明坐标系的单位，比如：

2.3 视口-viewport

视口（viewport）

视口是 SVG 可见的区域（也可以说是SVG画布大小）。可以将视口视为可看到特定场景的窗口。
可以使用 <svg> 元素的width和height属性指定视口的大小。
一旦设置了最外层 SVG 元素的宽度和高度，浏览器就会建立初始视口坐标系和初始用户坐标系。

视口坐标系

视口坐标系是在视口上建立的坐标系，原点在视口左上角的点(0, 0)，x轴正向向右，y轴正向下。
初始视口坐标系中的一个单位等于视口中的一个像素，该坐标系类似于 HTML 元素的坐标系。

用户坐标系（也称为当前坐标系或正在使用的用户空间，后面绘图都是参照该坐标系）

用户坐标系是建立在 SVG 视口上的坐标系。该坐标系最初与视口坐标系相同——它的原点位于视口的左上角。
使用viewBox属性，可以修改初始用户坐标系，使其不再与视口坐标系相同。

为什么要有两个坐标系？

因为SVG是矢量图，支持任意缩放。在用户坐标系统绘制的图形，最终会参照视口坐标系来进行等比例缩放。

2.4 视图框-viewBox

视图框（viewBox）

viewport是 SVG 画布的大小，而 viewBox 是用来定义用户坐标系中的位置和尺寸（该区域通常会被缩放填充视口）。
viewBox 也可理解为是用来指定用户坐标系大小。因为SVG的图形都是绘制到该区域中。用户坐标系可以比视口坐标系更小或更大，也可以在视口内完全或部分可见。
一旦创建了视口坐标系（<svg>使用width和height），浏览器就会创建一个与其相同的默认用户坐标系。
我们可以使用 viewBox 属性指定用户坐标系的大小。 ✓ 如果用户坐标系与视口坐标系具有相同的高宽比，它将viewBox区域拉伸以填充视口区域。 ✓ 如果用户坐标系和视口坐标系没有相同的宽高比，可用 preserveAspectRatio 属性来指定整个用户坐标系统是否在视口内可见。

viewBox语法

viewBox = <min-x> <min-y> <width> <height>，比如：viewBox =' 0 0 100 100'
- <min-x> 和 <min-y> 确定视图框的左上角坐标（不是修改用户坐标系的原点，绘图还是从原来的 0, 0 开始）
- <width> <height>确定该视图框的宽度和高度。 ➢ 宽度和高度不必与父 <svg> 元素上设置的宽度和高度相同。 ➢ 宽度和高度负值无效，为 0 是禁用元素的显示。

viewport和viewBox有相同的宽高比

svg
<svg width="400" height="400" viewBox="0 0 100 100" >
    <circle cx="50" cy="50" r="50"></circle>
</svg>

viewport和viewBox有相同的宽高比-指定viewBox最小的x和y

svg
<svg width="400" height="400" viewBox="50 50 100 100" >
    <circle cx="50" cy="50" r="50"></circle>
</svg>

viewport和viewBox不同的宽高比

svg
<svg width="400" height="400" 
  viewBox="0 0 200 100" 
  preserveAspectRatio="xMinYMin"
>
  <circle cx="50" cy="50" r="50"></circle>
</svg>

关于viewBox属性，可以参考这篇文章，非常容易理解如何理解SVG中的viewport、viewBox和preserveAspectRatio

2.5 绘制基本图形

矩形 rect

<rect> 元素6 个基本属性 x y width height rx ry

x ：矩形左上角的 x 轴位置
y ：矩形左上角的 y轴位置
width ：矩形的宽度
height ：矩形的高度
rx ：圆角的 x 轴方位的半径
ry ：圆角的 y 轴方位的半径。

html
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"></rect>

圆形 circle

<circle> 元素3 个基本属性。 r cx cy

r：圆的半径
cx：圆心的 x 轴位置
cy：圆心的 y 轴位置

html
<circle cx="100" cy="100" r="50" fill="red"></circle>

椭圆 ellipse

<ellipse> 元素4 个基本属性 rx ry cx cy

rx：椭圆的 x轴半径
ry：椭圆的 y轴半径
cx：椭圆中心的 x轴位置
cy：椭圆中心的 y轴位置

html
<ellipse cx="100" cy="100" rx="25" ry="50" fill="red"></ellipse>

线条 line

<line> 元素4 个基本属性

x1：起点的 x 轴位置
y1：起点的 y轴位置
x2：终点的 x轴位置
y2：终点的 y轴位置

html
<!--  stroke , 而不是 fill -->
<line x1="100" y1="100"  x2="200" y2="100" stroke="red" stroke-width="5"></line>

折线 polyline

<polyline> 元素1 个基本属性

points : 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。
每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。
所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。 ✓ 支持格式： “0 0, 1 1, 2 2”或 “0 ，0 , 1， 1, 2， 2”或 “0 0 1 1 2 2”

html
<!-- 第1种写法 -->
<!-- <polyline points="20 0, 80 50, 20, 100"></polyline> -->
<polyline
points="20 0, 80 50, 20, 100"
fill="transparent"
stroke="red"
></polyline>

<!-- 第2种写法 -->
<polyline points="20 0 80 50 20 100"></polyline>

<!-- 第3种写法 -->
<polyline points="20 ,0 ,80 ,50 ,20, 100"></polyline>

多边形 polygon

<polygon> 元素1 个基本属性

points :点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。
每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。
所以点列表 (0,0), (1,1) 和 (2,2) 推荐写成这样：“0 0, 1 1, 2 2”。
路径绘制完后闭合图形，所以最终的直线将从位置 (2,2) 连接到位置 (0,0)。

html
<polygon points="20 0, 80 50, 20 100" fill="transparent" stroke="red"></polygon>

路径 path

<path> 元素1 个基本属性

d :一个点集数列，以及其它关于如何绘制路径的信息，必须M命令开头。 ✓ 所以点列表 (0,0), (1,1) 和 (2,2) 推荐写成这样：“M 0 0, 1 1, 2 2”。 ✓ 支持格式： “M 0 0, 1 1, 2 2”或 “M0 0, 1 1, 2 2” 或 “M 0 ，0 , 1， 1, 2， 2”或 “M 0 0 1 1 2 2”

html
<!-- 1.使用path 绘制一个三角形 -->
<!-- <path d="M 20 0, 80 50, 20 100" fill="transparent" stroke="red"></path> -->


<!-- 1.使用path 绘制一个闭合的三角形 -->
<!-- <path d="M 20 0, 80 50, 20 100 Z" fill="transparent" stroke="red"></path> -->



<!-- 1.使用 path 绘图的命令:
  M  moveTo
  Z  close path
  L  lineTo  
-->
<path d="M 20 0,L 80 50,L 20 100 Z" fill="transparent" stroke="red"></path>

上面的 M Z L 都是一条命令表示 移动到某处 关闭路径 以及 连线到某处，还有很多其他的命令，这里不讲了，遇到去查即可。

图片 image

在SVG中绘制一张图片，在<image>元素的 href 属性引入图片URL

html
<!-- svg 1.0版本的语法 -->
<svg 
  version="1.0"
  baseProfile="full"
  width="300" height="300" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <image 
   x="0"
   y="0"
   xlink:href="../images/googlelogo_color_92x30dp.png"
   width="100"
   height="100"
  >
  </image>
</svg>


 <!-- svg 2.0 + 1.0 版本的语法( 为了兼容以前的浏览器的写法 ) -->
  <svg 
    version="1.0"
    baseProfile="full"
    width="300" height="300" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <image 
     x="0"
     y="0"
     xlink:href="../images/googlelogo_color_92x30dp.png"
     href="../images/googlelogo_color_92x30dp.png"
     width="100"
     height="100"
    >
    </image>
  </svg>

绘制文字 text

<text> 元素的基本属性

x 和 y 属性决定了文本在用户坐标系中显示的位置。
text-anchor 文本流方向属性，可以有 start、middle、end 或 inherit 值，默认值 start
dominant-baseline 基线对齐属性 : 有 auto 、middle 或 hanging 值, 默认值：auto

<text> 元素的字体属性

文本的一个至关重要的部分是它显示的字体。SVG 提供了一些属性，类似于CSS 。下列的属性可以被设置为一个 SVG 属性或一个 CSS 属性： ✓ font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和textdecoration。

其它文本相关的元素：

<tspan> 元素用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。 ✓ x 和 y 属性决定了文本在视口坐标系中显示的位置。 ✓ alignment-baseline 基线对齐属性：auto 、baseline、middle、hanging、top、bottom ... ,默认是 auto

html
<!-- 1.在svg中绘制一个文字 -->
<!-- <text x="100" y="100" font-size="50" fill="red">Ay</text> -->

<!-- 2.文本的对齐方式 -->
<!-- <text x="100" y="100" text-anchor="middle"  font-size="50" fill="red">Ay</text> -->

<!-- 3.基线对齐方式 :
  有 auto 、middle 或 hanging 值, 默认值：auto
-->
   <text x="100" y="100" dominant-baseline="middle" font-size="50" fill="red">Ay</text>

<!-- 4.在svg中使用tspan绘制一个文字 -->
<text x="40" y="100" font-size="20">
  iPhone14 
  <tspan fill="red">¥100</tspan>
</text>

2.6 SVG 的组合和复用

1. 元素的组合 g

<g>元素的属性（该元素只包含全局属性）

核心属性：id
样式属性：class 、style
Presentation Attributes（也可说是 CSS 属性，这些属性可写在CSS中，也可作为元素的属性用）： ✓ cursor, display, fill, fill-opacity, opacity,… ✓ stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin ✓ 更多表示属性：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation
事件属性：onchange, onclick, ondblclick, ondrag…
动画属性：transform
更多：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

html
<!-- <circle cx="50" cy="50" r="25" fill="transparent" stroke="red"></circle>
<circle cx="80" cy="50" r="25" fill="transparent" stroke="red"></circle>
<circle cx="110" cy="50" r="25" fill="transparent" stroke="red"></circle>
<circle cx="140" cy="50" r="25" fill="transparent" stroke="red"></circle> -->

<!-- 
  g 元素没有专有的属性,只有全局的属性
  全局属性:id  class  style fill stroke onclick
 -->
<g fill="transparent" stroke="red">
  <circle cx="50" cy="50" r="25"></circle>
  <circle cx="80" cy="50" r="25"></circle>
  <circle cx="110" cy="50" r="25"></circle>
  <circle cx="140" cy="50" r="25"></circle>  
</g>

2. 元素的复用和引入 defs 和 use

<defs>元素，定义可复用元素。

例如：定义基本图形、组合图形、渐变、滤镜、样式等等。
在< defs >元素中定义的图形元素是不会直接显示的。
可在视口任意地方用<use>来呈现在defs中定义的元素。
<defs>元素没有专有属性，使用时通常也不需添加任何属性。

<use> 元素的属性

href：需要复制元素/片段的 URL 或 ID（支持跨SVG引用）。默认值：无
xlink
：（SVG2.0已弃用）需要复制的元素/片段的 URL 或 ID 。默认值：无
x / y ：元素的 x / y 坐标（相对复制元素的位置）。默认值：0
width / height ：元素的宽和高（在引入svg或symbol元素才起作用）。默认值：0

html
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
  <!-- 0.样式 -->
  <style>
    rect{
      fill: green;
    }
  </style>
  <!-- 1.定义了一个矩形 -->
  <rect id="rectangle"  x="0" y="0" width="100" height="50"></rect>

  <!-- 2.定义了一个组合图形 -->
  <g id="logo" fill="transparent" stroke="red">
    <circle cx="50" cy="50" r="25"></circle>
    <circle cx="80" cy="50" r="25"></circle>
    <circle cx="110" cy="50" r="25"></circle>
    <circle cx="140" cy="50" r="25"></circle>  
  </g>
  <!-- 定义渐变 -->
  <!-- 滤镜 -->
</defs>

<!-- 在这里进行图形的复用 -->
<!-- <use href="#rectangle"></use> -->
<!-- <use x="100" y="100"  href="#rectangle"></use> -->

<!-- <use href="#logo"></use> -->
<!-- <use x="100" y="100" href="#logo"></use> -->

</svg>



<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
<!-- 
  他的宽和高是没有生效的 ????  只用use引用的图形是 svg 或 symbol 才会起作用
 -->
<use href="#rectangle" width="200" height="100" ></use>
</svg>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
<use href="#logo"></use>
</svg>

图形元素复用 symbols

<symbol> 元素和 <defs> 元素类似，也是用于定义可复用元素，然后通过 <use> 元素来引用显示。

在 <symbol> 元素中定义的图形元素默认也是不会显示在界面上。
<symbol>元素常见的应用场景是用来定义各种小图标，比如：icon、logo、徽章等

<symbol>元素的属性

viewBox：定义当前 <symbol> 的视图框。
x / y ：symbol元素的 x / y坐标。；默认值：0
width / height：symbol元素的宽度。默认值：0 <symbol>和<defs> 的区别
<defs>元素没有专有属性，而<symbol>元素提供了更多的属性 ✓ 比如： viewBox、 preserveAspectRatio 、x、y、width、height等。
<symbol>元素有自己用户坐标系，可以用于制作SVG精灵图。
<symbol>元素定义的图形增加了结构和语义性，提高文档的可访问性。 SVG ICON文件-合并成SVG精灵图：https://www.zhangxinxu.com/sp/svgo

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

<!-- 1.ICON previous-->
<symbol id="previous" viewBox="0 0 100 100">
  <path fill="currentColor" d="M 80 0,L 20 50, L 80 100 Z"></path>
</symbol>

<!-- 2.ICON next -->
<symbol id="next" viewBox="0 0 100 100">
  <polygon points="20 0, 80 50, 20 100"></polygon>
</symbol>

<!-- 复用 -->
<!-- <use href="#previous" width="100" height="100"></use> -->
</svg>


<!-- 复用 -->
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
<!-- 直接在use上指定ICON的 width和 hegiht -->
<use href="#previous" width="50" height="50"></use>
</svg>

<!-- 这个属于缩小 -->
<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" >
<use href="#previous" ></use>
</svg>

<!-- 属于放大 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" >
<use href="#previous" ></use>
</svg>

3. SVG 高级

3.1 填充和描边

如果想要给SVG中的元素上色，一般有两种方案可以实现：

第一种：直接使用元素的属性，比如：填充（fill）属性、描边（stroke）属性等。

html
<rect x="10" y="10" width="100" height="100" fill="currentColor" fill-opacity="0.4"></rect>
<rect x="10" y="10" width="100" height="100" 
  fill="transparent"
  stroke="red"
  stroke-width="3"
  stroke-opacity="1"
></rect>

第二种：直接编写CSS样式，因为SVG也是HTML中的元素，也支持用CSS的方式来编写样式。

直接编写CSS样式实现填充和描边

除了定义元素的属性外，你也可以通过CSS来实现填充和描边（CSS样式可写在defs中，也可写在HTML头部或外部等）。
语法和 HTML 里使用 CSS 一样，需要注意的是：需要把 background-color、border 改成 fill 和 stroke
不是所有的属性都能用 CSS 来设置，上色和填充的部分是可以用 CSS 来设置。 ✓ 比如，fill，stroke，stroke-dasharray 等可以用CSS设置；比如，路径的命令则不能用 CSS 设置。

哪些属性可以使用CSS设置，哪些不能呢？

SVG规范中将属性区分成 Presentation Attributes 和 Attributes 属性。 ✓ Presentation Attributes 属性( 支持CSS和元素用 )：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation ✓ Attributes 属性（只能在元素用）： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute ✓ 提示：这些属性是不需要去记的，用多了就记住了，在忘记时测试一下就知道了。

CSS给SVG中的元素填充、描边和上色，支持如下4种编写方式：

方式一：内联（行内） CSS 样式，写在元素的style属性上
方式二：内嵌（内部） CSS 样式，写在 <defs>中的 <style>标签中
方式三：内嵌（内部） CSS 样式，写在<head>中的<style>标签中
方式四：外部 CSS 样式文件，写在 .css 文件中

CSS样式优先级别：内联的 style > defs中的style > 外部 / head内部 > 属性 fill

html
<!-- 1.行内的样式 -->
<rect x="10" y="10" width="100" height="100"
 style="fill:red;"
></rect>

<!-- 2.行内的样式 -->
<defs>
  <style>
    .rectangle{
      fill: green;
      stroke: red;
    }
  </style>
</defs>

<rect class="rectangle" x="10" y="10" width="100" height="100"></rect>

/* 3.行内的样式 */
<style>
.rectangle{
  fill: blue;
}
</style>

<rect class="rectangle" x="10" y="10" width="100" height="100"></rect>

/* 4. 引入css文件*/
<link rel="stylesheet" href="./style.css">
<rect class="rectangle" x="10" y="10" width="100" height="100"></rect>

3.2 渐变和滤镜

SVG除了可以简单的填充和描边，还支持在填充和描边上应用渐变色。渐变有两种类型：线性渐变 和 径向渐变。

编写渐变时，必须给渐变内容指定一个 id 属性，use引用需用到。
建议渐变内容定义在<defs>标签内部，渐变通常是可复用的。

线性渐变，是沿着直线改变颜色。下面看一下线性渐变的使用步骤：

第1步：在 SVG 文件的 defs 元素内部，创建一个 <linearGradient> 节点，并添加 id 属性。
第2步：在 <linearGradient> 内编写几个 <stop> 结点。 ✓ 给 <stop> 结点指定位置 offset属性和颜色stop-color属性，用来指定渐变在特定的位置上应用什么颜色 ➢ offset 和 stop-color 这两个属性值，也可以通过 CSS 来指定。 ✓ 也可通过 stop-opacity 来设置某个位置的半透明度。
第3步：在一个元素的 fill 属性或 stroke 属性中通过ID来引用 <linearGradient> 节点。 ✓ 比如：属性fill属性设置为url( #Gradient2 )即可。
第4步（可选）：控制渐变方向，通过 ( x1, y1 ) 和 ( x2, y2 ) 两个点控制。 ✓ （0, 0）（0, 1）从上到下；（0, 0）（1, 0）从左到右。 ✓ 当然也可以通过 gradientTransform 属性设置渐变形变。比如： gradientTransform=“rotate(90)” 从上到下。

html
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义可以复用的元素: 样式, 渐变, 图形, 滤镜... -->
  <defs>
    <!-- 默认的渐变色 -->
    <linearGradient id="gradient1">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="50%" stop-color="green"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>

    <!-- 这个是制定渐变的方向 -->
    <linearGradient id="gradient2" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="50%" stop-color="green"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>

    <!-- 通过形变 渐变色(了解 ) -->
    <linearGradient id="gradient3" gradientTransform="rotate(0)">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="50%" stop-color="green"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100" height="50" fill="url(#gradient3)"></rect>
</svg>

在前端开发中，毛玻璃效果有几种方案来实现：

方案一：使用CSS的 backdrop-filter 或 filter 属性

backdrop-filter：可以给一个元素后面区域添加模糊效果。 适用于元素背后的所有元素。为了看到效果，必须使元素或其背景至少部分透明。
filter：直接将模糊或颜色偏移等模糊效果应用于指定的元素。

方案二：使用SVG的 filter 和 feGaussianBlur 元素（建议少用）

<filter>：元素作为滤镜操作的容器，该元素定义的滤镜效果需要在SVG元素上的 filter 属性引用。 ✓ x ， y, width, height 定义了在画布上应用此过滤器的矩形区域。x， y 默认值为 -10%（相对自身）；width ，height 默认值为 120% （相对自身）。
<feGaussianBlur>：该滤镜专门对输入图像进行高斯模糊 ✓ stdDeviation 熟悉指定模糊的程度
<feOffset> ：该滤镜可以对输入图像指定它的偏移量。

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" >
    <defs>
      <!-- 高斯模糊的 效果 -->
      <filter id="blurFilter">
        <!--  ......  -->
        <feGaussianBlur stdDeviation="8"></feGaussianBlur>
      </filter>
    </defs>
    <image 
      href="../images/avatar.jpeg"
      width="200"
      height="200"
      filter="url(#blurFilter)"
    >
    </image>
</svg>

3.3 SVG 形变 transform

transform 属性支持的函数有 translate rotate scale skew matrix

1. 平移 translate

与 CSS 的 translate 相似但有区别，这里只支持 2D 变换，不需单位。

html
<rect
    x="0"
    y="0"
    width="100"
    height="50"
    transform="translate(200, 200)"
    ></rect>

2. 旋转 rotate

与CSS的rotate相似但有区别。区别是：支持2D变换，不需单位，可指定旋转原点。

html
<rect 
  transform="translate(100, 0) rotate(45, 50, 25)"
  x="0" y="0" width="100" height="50"
>
</rect>

3. 缩放 scale

与CSS的scale相似但有区别，这只支持2D变换，不需单位。

html
  <rect
    transform="translate(100, 100) scale(1, 2)"
    x="0"
    y="0"
    width="100"
    height="50"
  ></rect>

3.4 路径描边动画

stroke 是描边属性，专门给图形描边。如果想给各种描边添加动画效果，需用到下面两个属性：

stroke-dasharray =“number [, number , ….]”: 将虚线类型应用在描边上。 ✓ 该值必须是用逗号分割的数字组成的数列，空格会被忽略。比如 3，5 : ➢ 第一个表示填色区域的长度为 3 ➢ 第二个表示非填色区域的长度为 5
stroke-dashoffset：指定在dasharray模式下路径的偏移量。 ✓ 值为number类型，除了可以正值，也可以取负值。

描边动画实现步骤：

1.先将描边设置为虚线
2.接着将描边偏移到不可见处
3.通过动画让描边慢慢变为可见，这样就产生了动画效果了。

html
<style>
  #line1 {
    /* 指定为虚线 */
    stroke-dasharray: 100px;
    /* 可见 */
    stroke-dashoffset: 20px;
    /* animation: line1Move 2s linear; */
  }

  @keyframes line1Move {
    0% {
      /* 不可见 */
      stroke-dashoffset: 100px;
    }

    100% {
      /* 可见 */
      stroke-dashoffset: 0px;
    }
  }
</style>


<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 
  stroke , 而不是 fill
 -->
  <line
    id="line1"
    x1="100"
    y1="70"
    x2="200"
    y2="70"
    stroke="red"
    stroke-width="10"
  ></line>
</svg>

3.5 SMIL 动画

SMIL（Synchronized Multimedia Integration Language 同步多媒体集成语言）是W3C推荐的可扩展标记语言，用于描述 多媒体演示。

SMIL 标记是用 XML 编写的，与HTML有相似之处。
SMIL 允许开发多媒体项目，例如：文本、图像、视频、音频等。
SMIL 定义了时间、布局、动画、视觉转换和媒体嵌入等标记，比如：<head> <body> <seq> <par> <excl> 等元素

SMIL的应用

目前最常用的Web浏览器基本都支持 SMIL 语言。
SVG 动画元素是基于SMIL实现（SVG中使用SMIL实现元素有：<set>、<animate>、<animateMotion>...）。
Adobe Media Player implement SMIL playback。
QuickTime Player implement SMIL playback。

SVG动画实现方式

用JS脚本实现：可以直接通过 JavaScript 在来给 SVG 创建动画和开发交互式的用户界面。
用CSS样式实现：自 2008 年以来，CSS动画已成为WebKit中的一项功能，使得我们可以通过CSS动画的方式来给文档对象模型(DOM) 中的 SVG 文件编写动态效果。
用SMIL实现：一种基于SMIL语言实现的SVG动画。

SMIL动画的优势

只需在页面放几个animate元素就可以实现强大的动画效果，无需任何CSS和JS代码。
SMIL支持声明式动画。声明式动画不需指定如何做某事的细节，而是指定最终结果应该是什么，将实现细节留给客户端软件
在 JavaScript 中，动画通常使用 setTimeout() 或 setInterval() 等方法创建，这些方法需要手动管理动画的时间。而SMIL 声明式动画可以让浏览器自动处理，比如：动画轨迹直接与动画对象相关联、物体和运动路径方向、管理动画时间等等。
SMIL 动画还有一个令人愉快的特点是，动画与对象本身是紧密集成的，对于代码的编写和阅读性都非常好。

SVG 中支持SMIL动画的元素：

<set> <animate> <animateColor> <animateMotion>
更多 https://www.w3.org/TR/SVG11/animate.html#AnimationElements

1. set 元素

set元素是最简单的 SVG 动画元素。它是在经过特定时间间隔后，将属性设置为某个值（不是过度动画效果）。因此，图像不是连续动画，而是改变一次属性值。它支持所有属性类型，包括那些无法合理插值的属性类型，例如：字符串和布尔值。而对于可以合理插值的属性通常首选 <animate>元素。

常用属性有 attributeName to begin

html
<!-- 1. 在3秒后自动将长方形瞬间移到右边 -->
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="red">
       <set
         attributeName ='x'
         to="200"
         begin="3s"
       >
       </set> 
    </rect>
</svg>
<!-- 点击长方形后，长方形瞬间移到右边 -->
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect id="rectangle" x="0" y="0" width="100" height="50" fill="green">
       <set
         attributeName ='x'
         to="200"
         begin="rectangle.click"
       >
       </set> 
    </rect>
</svg>

2. animate 元素 常用属性有：attributeName from values begin dur fill repeatCount


  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="green">
      <!-- 
        form: 0
        to: 200
       -->
      <animate
        attributeName="x"
        values="0; 170; 200"
        dur="3s"
        repeatCount="indefinite"
      >
      </animate>

      <animate
        attributeName="fill"
        values="red;green"
        dur="3s"
        repeatCount="indefinite"
      >
      </animate>
    </rect>

  </svg>

目录