svg基础知识学习与总结

svg

svg（Scalable Vector Graphics）是一种图像文件格式，是可缩放的矢量图像。
svg是用XML定义的语言，用来描述二维矢量及矢量/栅格图像。
不同于常规的jpg格式图像文件，缩放不会影响图像质量，不会失真模糊。并且可以直接用svg代码来描述图像，可以使用任何文字处理工具打开svg图像文件，随时可以插入到HTML中通过浏览器打开，通过代码编辑使svg图像具有交互功能。

早期浏览器不支持svg，需通脱< object >元素。
除了通过直接嵌入在html中，svg也可以当做.svg后缀文件作为普通图片通过标签引入至网页中，通过< img >、< object >元素展示svg图像的时候，svg就变成了另外一种图片格式，对于JavaScript开发来说不甚友好，更好的方式是直接将svg图片的代码嵌入到html文档中。

svg标签：

svg元素标签	作用
a	定义超链接
animate	动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。
animateMotion	元素定义了一个元素如何沿着运动路径进行移动
animateTransform	元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。
circle	是一个SVG的基本形状，用来创建圆,基于一个圆心和一个半径
clipPath	定义一条剪切路径，可作为其他元素的 clip-path 属性的值。剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制
color-profile	该元素允许描述用于图像的颜色配置文件
defs	允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现
desc	SVG绘画中的每个容器元素或图形元素都可以提供一个desc描述性字符串，这些描述只是纯文本的。如果当前的SVG文档片段在视媒体中呈现，desc元素不会呈现为图形的一部分。替代性提词既可以看到也可以听到，它显示了desc元素但是不会显示路径元素或者别的图形元素。desc元素提升了SVG文档的可访问性
discard
ellipse	ellipse元素是一个SVG基本形状，用来创建一个椭圆，基于一个中心坐标以及它们的x半径和y半径
feBlend	feBlend滤镜把两个对象组合在一起，使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性mode定义
feColorMatrix	该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色
feComponentTransfer	滤镜基元对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作
feComposite	该滤镜执行两个输入图像的智能像素组合，在图像空间中使用以下Porter-Duff合成操作之一：over、in、atop、xor
feConvolveMatrix	元素应用了一个矩阵卷积滤镜效果
feDiffuseLighting	滤镜光照一个图像，使用alpha通道作为隆起映射
feDisplacementMap	映射置换滤镜，该滤镜用来自图像中从in2到空间的像素值置换图像从in到空间的像素值
feDistantLight	该滤镜定义了一个距离光源，可以用在灯光滤镜feDiffuseLighting元素或feSpecularLighting元素的内部
feDropShadow
feFlood	该滤镜用flood-color元素定义的颜色和flood-opacity元素定义的不透明度填充了滤镜子区域
feFuncA	滤镜，为它的父元素 feComponentTransfer 的输入图形的透明度（alpha）组件定义了变换函数
feFuncB	滤镜，为它的父feComponentTransfer元素的输入图形的蓝色成分定义了变换函数
feFuncG	滤镜，为它的父feComponentTransfer元素的输入图形的绿色成分定义了变换函数
feFuncR	滤镜，为它的父feComponentTransfer元素的输入图形的红色成分定义了变换函数
feGaussianBlur	滤镜对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了钟形
feImage	滤镜从外部来源取得图像数据，并提供像素数据作为输出（意味着如果外部来源是一个SVG图像，这个图像将被栅格化。）
feMerge	滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果
feMergeNode	拿另一个滤镜的结果，让它的父feMerge元素处理
feMorphology	该滤镜用来侵蚀或扩张输入的图像。它在增肥或瘦身效果方面特别有用
feOffset	该输入图像作为一个整体，在属性dx和属性dy的值指定了它的偏移量
fePointLight	光源元素
feSpecularLighting	该滤镜照亮一个源图形，使用alpha通道作为隆起映射
feSpotLight	是一种光源元素，用于SVG文件
feTile	输入图像是平铺的，结果用来填充目标。它的效果近似于一个pattern图案对象
feTurbulence	该滤镜利用Perlin噪声函数创建了一个图像
filter	作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标SVG元素上的filter属性引用一个滤镜
foreignObject
g	元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过use元素来引用它们
hatch
hatchpath
image	表现为图像文件或者其他SVG文件。svg图像格式转换软件支持JPEG、PNG格式，是否支持动图GIF不明确
line	是一个SVG基本形状，用来创建一条连接两个点的线
linearGradient	用来定义线性渐变，用于图形元素的填充或描边
marker	定义了在特定的path元素、line元素、polyline元素或者polygon元素上绘制的箭头或者多边标记图形
mask	用于定义这样的遮罩元素
mesh
meshgradient
meshpatch
meshrow
metadata	数据的结构化数据。SVG内容里面包含的元数据必须放在metadata元素里面
mpath	元素的mpath子元素使animateMotion 元素能够引用一个外部的path元素作为运动路径的定义
path	是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建
pattern	使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素
polygon	定义了一个由一组首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点
polyline	是SVG的一个基本形状，用来创建一系列直线连接多个点。典型的一个polyline是用来创建一个开放的形状，最后一点不与第一点相连
radialGradient	用来定义径向渐变，以对图形元素进行填充或描