SVG

文章简介： 入门章节，主要是分享网上SVG的技术点，整合成一个完整的技术文档，形成一个完整的技术框架，也方便SVG基础差的新人学习。 进阶需要我们进一步去学习研究归纳的内容。

viewPort 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。

transform svg 中的transform可以写在属性中,也可以写在css中，写在css中要遵循css的规则，在这里就不详细去介绍了，这里主要介绍一下svg的transform属性。

前言 由于SVG自身的矢量性质，不管在什么情况下，图标都很清晰，可以适应不同尺寸大小和不用分辨率。不用担心模糊和锯齿。同时还能更改图标的填充颜色。

SMIL SMIL是指同步多媒体集成语言（Synchronized Multimedia Integration Language）

DOM操作 svg看起来是一个整体，但是如果svg代码直接写在HTML页面之中，它就成为页面DOM的一部分，可以直接用DOM操作。

<foreignObject>标签 <foreignObject>是SVG的一个子标签，这个标签中可以用于显示普通的DOM标签。也就是渲染XHTML元素。

前言 SVG动画能够实现和CSS3动画类似的效果，除此之外还能够实现强大的路径动画，也就是使物体按照一定的路径移动。

前言 虽然SVG不是一种位图描述语言，佴它仍然允许我们使用一些相同的工具，比如滤镜。当SVG阅读器程序处理一个图形对象时，它会将对象呈现在位图输出设备上；

前言 SVG元素的形变都会用到一个元素属性transform，跟CSS的transform的形变差不多。

前言 擦除已经创建的元素的部分内容，最初看起来有点矛盾。但是如果你打算在SVG中创建一个半圆形，你将很快发现下面的属性的作用了。 Clipping用来移除在别处定义的元素的部分内容。

图案 <patterns>的功能非常强大，在pattern元素内部你可以包含任何之前包含过的其它基本形状，并且每个形状都可以使用之前学习过的任何样式样式化，包括渐变和半透明。

前言 SVG并非只能简单填充颜色和描边，更令人兴奋的是，你还可以创建和并在填充和描边上应用渐变色。 有两种类型的渐变：线性渐变和径向渐变。

前言 当我们绘制好了形状之后，是不会在SVG上显示出来（当然浏览器会给形状定义默认的填充色）。需要学习如何给形状添加颜色。

SVG 文字 该部分分为4个主要部分： <text>和<tspan>标签详解 文本水平垂直居中问题 <textpath>让文本在指定路径上排列

简介 <path>元素是SVG基本形状中最强大的一个，他不仅能创建其他基本形状，还能创建更多复杂的其他形状。<path>只需要设定很少的点，既可以创建平滑流畅的线条（比如曲线）。

不可视标签 不可视标签是svg标签中比较核心的部分，扩展了svg的功能。这部分标签不能之前显示在svg视图上，但可以用于定义纹理，和管理标签。

概述： SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。