svg学习笔记

SVG 可缩放矢量图形（Scalable Vector Graphics）

存在形式：

SVG 是使用 XML 来描述二维图形和绘图程序的语言

在html中的引入方式

1、<embed src="helloworld.svg" />

2、<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />  

3、<iframe src="rect.svg" width="300" height="100"></iframe>

4、直接在页面中引用
<svg width="100%" height="100%" version="1.1" xmlns="svg">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke width:1;stroke:rgb(0,0,0)"/>
</svg>`

在相应标签

矩形 <rect>

<rect x="20" y="20" width="250"  rx="20" ry="20" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>

// 属性
- x 属性定义矩形的左侧位置（到浏览器窗口左侧的距离）
- y 属性定义矩形的顶端位置（同上）
- rx 属性定义水平半径 
- ry 属性定义垂直半径

圆形 <circle>

<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>

// 属性
- cx,cy 表示圆心所在位置

椭圆 <ellipse>

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

//属性
- cx,cy 表示圆心所在位置
- rx x轴半径
- ry y轴半径

线 <line>

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
- x1y1,x2,y2表示起点和终点（x0，y0，x1,y1也可以）

折线 <polyline>

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
//属性
- points 表示多个点 按顺序连接

多边形 <polygon>

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

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>
// 自动闭合起点和终点的折线而已

路径 <path>


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

    <path d="M250 150 L150 350 L350 350 Z" />
    
</svg>

// 属性
M = moveto 移动到新的位置
L = lineto 从当前坐标画一条直线到一个新坐标
H = horizontal lineto 画一条水平线到新坐标
V = vertical lineto 画一条垂直线到新坐标
C = curveto 
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc 画一条椭圆弧线
Z = closepath 关闭当前路径

文本

<svg viewBox="0 0 600 300">
    <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text" > Text </text> 
</svg>

图案

<pattern id="p-fire" viewBox="30 100 186 200" patternUnits="userSpaceOnUse" width="216" height="200" x="-70" y="35" > 
    <image xlink:href="http://yoksel.github.io/about-svg/assets/img/parts/fire.gif" width="256" height="300"/> 
</pattern>

一些共有属性

fill-opacity 属性定义填充颜色透明度（0 - 1）
stroke-opacity 属性定义笔触（类似border）颜色的透明度（0 - 1）
stroke: 笔触颜色
stroke-width：笔触大小

stroke-linecap：

有三个值`butt` `square` `round` 用来控制绘制描边的方式

butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。

square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。

round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。

表现形式

stroke-dasharray: 是一组用逗号分割的数字组成的数列, 比如"5,10,5"

stroke-linejoin:用来控制两条描边线段之间，用什么方式连接。
表现形式

注意 样式属性可以直接写在dom上面也可以写成css,比如stroke，fill等等，也有一些是独立的，比如cy,cx,ry,rx

滤镜

1、滤镜效果列表

// 混合和合并效果
feBlend ：类似于CSS blend modes，描述了图像通过混合模式进行交互
feComposite ：混合图片，可以以百分比的方式进行混合
feMerge ：不同滤镜的組合 ( merge )

// 色彩效果
feColorMatrix ：颜色应用矩阵转换。( Matrix multiplication )
feComponentTransfer ：允许图片由四个色彩通道重新定义（feFuncA、feFuncB、feFuncG、feFuncR）
feFlood ：重新绘制矩形並和其他物件结合

//光照和光源效果
feDiffuseLighting ：使用 alpha channel 计算凹凸
feDistantLight ：定义光源
fePointLight、feSpecularLighting、feSpotLight

// 其它特殊效果
feConvolveMatrix ：透过矩阵运算，做出模糊，边缘检测，锐化，浮雕和斜角...等效果。
feDisplacementMap ：置换每一英吋的图像
feGaussianBlur ：高斯模糊
feImage ：使用其他的过滤器(像feBlend或feComposite) 
feMergeNode
feMorphology： 削弱或扩张源图像
feOffset ：用来创建阴影
feTile ：让图像以重复模式進入滤镜
feTurbulence ：创建震荡与纹理

2、滤镜基本用法

<svg> 
    <filter id="filterName"> 
    // filter definition here can include 
    // multiple of the above items 
    </filter> 
</svg>

通过<defs></defs>中的<filter></filter>定义相滤镜效果，一个<filter>中可以有多个滤镜效果，都是<fexxx>的标签形式存在
1、然后通过filter:url(#xxx)"的形式去引用滤镜 // 容器元素 (除了mask) and 图片元素
2、然后通过fill:url(#xxx)"的形式去引用滤镜 // 形状和text容器元素
可以多次复用

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
 <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/>

每个滤镜效果都有自己的特有属性

svg应用

使用symbol 创建icon

例如<symbol>和<use>结合使用能创建图标
通过illustrator 生成的一个icon.svg文件

<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"> 
    <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
    </path> 
</svg>

// 在页面中如此引入即可

<body> 
    <svg style="display: none;"> 
      <symbol viewBox="0 0 24 24" id="heart">
        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
        </path>
      </symbol> 
    </svg> 
    <svg> 
        <use xlink:href="#heart"/></svg> 
  </body>

换句话说，就是你定义了一组图形对象（使用<symbol>元素）之后，可以使用<use>元素来对它进行无限次实例化展示。你使用xlink:href属性来指定你想要展示哪一组图标，这里，我们要展示的是id为#heart的<symbol>元素

注意xlink:href属性和id标识符是唯一对应的（它不能引用外部资源中的id）
这种方法非常好用，但缺点是SVG sprite不能缓存。

其中属性`viewBox` 表示svg的可视区域，详细解释

动画

svg动画可以依赖css中的animation或者svg中动画标签来完成
不过 svg的坐标系和HTML的坐标系不大一样，HTML元素的坐标原点系在dom中心，而svg实在画布左上角（0.0）处，roate比较明显能看的出来

这里css动画部展开讲，看看svg自带的动画标签和属性

<set>

set是没有持续的动画效果的，有点类似css中的transform 但是他还可以设置延迟执行时间

他能实现下面三个标签的功能 所以 下面三个比较少用

<animateColor>
<animateTransform>
<animateMotion>

<animate attributeType="CSS" attributeName="opacity"  from="1" to="0" dur="5s" repeatCount="indefinite" />

动画标签部分属性说明：

1. attributeName = <attributeName> 要变化的元素属性名称

    (1) 可以是元素直接暴露的属性，例如，元素上的x, y或者font-size; 
    (2) 可以是CSS属性。例如，透明度opacity.

2. attributeType = “CSS | XML | auto”

     attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。
     x, y以及transform就属于XML, opacity就属于CSS. auto为默认值，一般不用设置，浏览器会自动判断

3.from, to, by, values

from 如果和默认值一样可以忽略，
to和by必须有一个出现才能形成动画，to是到制定目标，是绝对的，by是相对的，是from+by就是终点。to和by同时出现，by将被忽略

更详细请前往鑫大大的博客

svg 文案

三种方法来制作图案文本

fill
mask
clip-path

兼容性

1、目前主流浏览器,ie9+都支持svg基本属性，但是滤镜、字体等等效果也是部分兼容

2、对滤镜支持各不同，并且存在一定的性能问题

3、优雅降级

<svg width="96" height="96">
    <image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>

相对于其他格式的图片

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

和其他相似技术相比，比如canvas、flash

<canvas>和<svg>都是HTML5推荐使用的图形技术，Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图形；SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身就能独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准
Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景

svg库

1、svg.js
2、snap.svg

svg学习笔记

SVG 可缩放矢量图形（Scalable Vector Graphics）

存在形式：

在html中的引入方式

在相应标签

一些共有属性

滤镜

1、滤镜效果列表

2、滤镜基本用法

svg应用

使用symbol 创建icon

其中属性`viewBox` 表示svg的可视区域，详细解释

动画

动画标签部分属性说明：

1. attributeName = <attributeName> 要变化的元素属性名称

2. attributeType = “CSS | XML | auto”

3.from, to, by, values

svg 文案

兼容性

1、目前主流浏览器,ie9+都支持svg基本属性，但是滤镜、字体等等效果也是部分兼容

2、对滤镜支持各不同，并且存在一定的性能问题

3、优雅降级

相对于其他格式的图片

和其他相似技术相比，比如canvas、flash

svg库

为什么要用svg

fashen007

引用和评论

vue-cli3+babel7项目兼容IE

svg转字体文件部分线条缺失

【第4期】搜索客 Meetup | INFINI Pizza 网站 SVG 动画这么炫，我教你啊！

SVG 了解下

svg学习笔记

SVG 可缩放矢量图形（Scalable Vector Graphics）

存在形式：

在html中的引入方式

在相应标签

一些共有属性

滤镜

1、滤镜效果列表

2、滤镜基本用法

svg应用

使用symbol 创建icon

其中属性viewBox 表示svg的可视区域，详细解释

动画

动画标签部分属性说明：

1. attributeName = <attributeName> 要变化的元素属性名称

2. attributeType = “CSS | XML | auto”

3.from, to, by, values

svg 文案

兼容性

1、目前主流浏览器,ie9+都支持svg基本属性，但是滤镜、字体等等效果也是部分兼容

2、对滤镜支持各不同，并且存在一定的性能问题

3、优雅降级

相对于其他格式的图片

和其他相似技术相比，比如canvas、flash

svg库

为什么要用svg

fashen007

引用和评论

vue-cli3+babel7项目兼容IE

svg转字体文件部分线条缺失

【第4期】搜索客 Meetup | INFINI Pizza 网站 SVG 动画这么炫，我教你啊！

SVG 了解下

其中属性`viewBox` 表示svg的可视区域，详细解释