js学习20-（svg）
SVG
svg简介
SVG指可伸缩矢量图形 (Scalable Vector Graphics)；
SVG是使用 XML 来描述二维图形和绘图程序的语言、是可伸缩的、是万维网联盟的标准、是开放的标准。
SVG与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG文件是纯粹的 XML，可被非常多的工具读取和修改（比如记事本）
SVG用来定义用于网络的基于矢量的图形，使用 XML 格式定义图形，
图像在放大或改变尺寸的情况下其图形质量不会有所损失，
图像可在任何的分辨率下被高质量地打印，图像中的文本是可选的，
同时也是可搜索的（很适合制作地图）；
SVG与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体，可以与 Java 技术一起运行；
SVG有一些预定义的形状元素，可被开发者使用和操作：
- 矩形
- 圆形
- 椭圆
- 线
- 折线
- 多边形
- 路径
svg的使用方式：
1、svg文件可以直接插入到网页中，称为DOM的一部分，然后使用js和css进行操作。
2、svg代码可以写在一个独立文件中，然后用“img/object/iframe/embed”标签插入到网页中
3、css可以直接使用svg文件。
4、svg还可以转为BASE64编码，作为Data url写入网页中。
SVG语法
1、svg标签
svg代码都写在顶层标签
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="myCircle" cx="100" cy="100" r="50"/>
</svg> svg中的width和height属性制定了svg图像在html元素中所占的宽度和高度。既可以采用相对单位，也可以采用绝对定位。若不指定这两个属性，则svg图像默认大小是300px(宽)*150px(高)。
viewBox属性：该属性有四个属性值，分别表示左上角的横坐标和纵坐标、视窗的高度和宽度。
注意：视口必须适配所在的空间。上面例子中，视口的大小是5050，由于svg图像的大小是100100，则视口会放大去适配svg图像的大小，即放大了四倍。
若svg中不指定width、height属性，只指定viewBox属性，则相当于只给定svg图像的长宽比，此时svg图像的默认大小将等于所在的html元素的大小。
2、circle标签
标签代表的是圆形
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="myCircle" cx="100" cy="100" r="50"/>
</svg>属性：
cx：圆心的横坐标。
cy：圆心的纵坐标。
r：圆的半径
也可以设置class和id，便于在css中设定样式。
svg在css属性：
fill：填充色
stroke：描边色
stroke-width：边框宽度
3、line标签
<svg width="200" height="200" >
<line id="myLine" x"0" y1="0" x2="200" y2="200" style="stroke: #FF0000; stroke-width: 2px;"/>
</svg>属性：
x1和y1：代表的是line起点的横纵坐标。
x2和y2：代表的是line终点的横纵坐标。
style：代表的是line的样式
4、polyline标签
<svg width="200" height="200" >
<polyline id="mypolyLine" points="3,3 20,15 52,100 40,189" fill="none" style=" stroke: #FF0000; stroke-width: 2px;"/>
</svg>属性：
points：代表的是折线中每个端点的坐标。横坐标与纵坐标之间用逗号隔开，端点与端点之间用空格隔开。
fill：代表的折线间的填充。none代表的是不填充
5、rect标签
标签用于绘制矩形
<svg width="200" height="200" >
<rect id="mypolyLine" x="20" y="20" width="100" height="80" style=" stroke: #FF0000; stroke-width: 2px; fill:#6495ED"/>
</svg>6、ellipse标签
标签用于绘制椭圆
<svg width="200" height="200" >
<ellipse id="myEllipse" cx="100" cy="100" rx="20" ry="40" style=" stroke: #FF0000; stroke-width: 5px; fill:#6495ED"/>
</svg>属性：
cx和xy：代表的是椭圆的圆心的横纵坐标
rx：代表的是椭圆的横轴半径（单位像素）
ry：代表的是椭圆的纵轴半径（单位像素）
7、polygon标签
<svg width="200" height="200" >
<polygon points="3,3 20,15 52,100 40,189 20,130 3,3" style=" stroke: #000000; stroke-width: 5px; fill:#6495ED"/>
</svg>属性：
points：代表的是多边形的每个端点的坐标。横坐标与纵坐标之间用逗号隔开，端点与端点之间用空格隔开。
8、path标签
<svg width="200" height="200" >
<path d="M 15,5 L 40,50 L 40,80 L 100,80 z" style=" stroke: #000000; stroke-width: 5px; fill:#6495ED"/>
</svg>属性：
d：代表的是绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。
M/m：表示移动到（moveto）
L/l：表示画直线到（lineto）
Z/z：表示闭合路径
9、text标签
标签用于绘制文本
<svg width="200" height="200" >
<text x="50" y="50">hello svg</text>
</svg>属性：
x和y：代表的是文本区块基线起点的横纵坐标。文本的样式可以在css中进行设定。
10、use标签
<svg width="500" height="500" >
<circle id="myCircle" cx="100" cy="100" r="50"/>
<use href="#myCircle" x="200" y="0"/>
</svg>属性：
href：代表的是指定所要复制的节点。
x和y：代表的是左上角的坐标
11、g标签
标签是用来将多个形状组成一个组，便于复用。
<svg width="800" height="800" >
<g id="dobleCircle">
<circle id="myCircle" cx="100" cy="100" r="50"/>
<use href="#myCircle" x="200" y="0"/>
</g>
<use href="#dobleCircle" x="300"></use>
</svg>12、defs标签
标签用于隐藏某些内容
<svg width="800" height="800" >
<defs>
<g id="dobleCircle">
<circle id="myCircle" cx="100" cy="100" r="50"/>
<use href="#myCircle" x="200" y="0"/>
</g>
</defs>
<use href="#dobleCircle" x="300"></use>
</svg>13、pattern标签
标签用于自定义一个形状，该形状可以被引用来平铺一个区域。
<svg width="800" height="800" >
<pattern id="dots" width="100" height="100" patternUnits="userSpaceOnUse">
<circle id="myCircle" cx="50" cy="50" r="50"/>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"/>
</svg>
pattern标签将圆形定义为一个dots模式。
属性patternUnits=”userSpaceOnUse“表示pattern的宽度和长度是是实际的像素值。然后指定该模式去去填充下面绘制的矩形。
14、image标签
标签用于插入图片文件。
<svg width="800" height="800" >
<image xlink:href="img/1.jpg" width="50%" height="50%"></image>
</svg>属性：
xlink:href属性表示图像的来源
15、animate标签
标签用于产生动画效果
<svg width="800" height="800" >
<rect x="0" y="0" width="100" height="60" fill="#feac8e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>
</svg>属性：
attributeName：发生动画效果的属性名
from：单次动画的初始值
to：单次动画的结束值
dur：单次动画的持续时间
repeatCount：动画的循环模式
16、animateTransform标签
标签对css的transform属性不起作用，如果需要变形，则需要使用标签
<svg width="800" height="800" >
<rect x="0" y="0" width="100" height="60" fill="#feac8e" >
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
</rect>
</svg>属性：
type：代表变形的类型。上述例子中是旋转
from和to：第一个值是角度值，第二个和第三个值是旋转中心的坐标。
from="0 200 200"代表的是开始时，角度为0，围绕(200,200)开始旋转；
to="360 400 400"代表的是结束时，角度为360，围绕（400，400）旋转
JavaScript操作
1、dom操作
当svg代码直接写在了html中，则可以直接用dom操作
svg部分
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="myCircle" cx="100" cy="100" r="50"/>
</svg>
js部分
var myCircle = document.querySlecter("#myCircle")
myCircle.setAttribute('r',60)2、获取svg
使用、、标签引入svg时，可与获取svg dom
若使用的是标签引入svg，则无法获取svg dom
var svgObject = document.querySlecter("object");
var svgIframe = document.querySlecter("iframe");
var svgEmbed = document.querySlecter("embed");例子
效果图：
