SVG怎么在HTML5中使用
这期内容当中小编将会给大家带来有关SVG怎么在HTML5中使用，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
SVG的优势：
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
几个SVG图片小例子：
我们来看一下第三个分享图标的代码：
<svgxmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="002020"> <gstroke="#AAB0BA"fill="none"fill-rule="evenodd"> <pathd="M10.5243.413v8.235"stroke-linejoin="round"/> <pathd="M13.0277.508c.81301.678-.011.678-.01.4490.812.376.812.826l-.0056.36a.819.819001-.811.826H6.31a.822.822001-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.3735.111l2.143-2.092.1432.07"/> </g> </svg>
不了解SVG的同学现在一定一脸问号，就跟我第一次见他们一样，别着急，我们从基础看起。
什么是SVG？
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
怎么使用？
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中,例如上面的那颗小红心：
<body> <svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="20"height="20"viewBox="002020"> <defs> <rectid="a"y="54"width="60"height="25"rx="1"/> <maskid="b"x="0"y="0"width="60"height="25"fill="#fff"> <usexlink:href="#a"/> </mask> </defs> <gtransform="translate(-9-56)"fill="none"fill-rule="evenodd"> <usestroke="#EDEEEF"mask="url(#b)"stroke-width="2"xlink:href="#a"/> <pathd="M19.0562.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.0091.463-2.183.9134.9658.9835.6159.433V72l.023-.016.023.016v-.032c.65-.457.795-5.525.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.421.457-3.6291.725z"fill="red"/> </g> </svg> </body>
SVG 代码也可以写在一个以.svg结尾的文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。
<imgsrc="search.svg"> <objectid="object"data="search.svg"type="image/svg+xml"></object> <embedid="embed"src="search.svg"type="image/svg+xml"> <iframeid="iframe"src="search.svg"></iframe>
CSS也可以使用svg
.logo{
background:url(logo.svg);
}SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。
<imgsrc="data:image/svg+xml;base64,[data]">
SVG的语法
1. <svg>标签
SVG 代码都放在顶层标签<svg>之中。下面是一个例子。
<svgwidth="100%"height="100%"> <circleid="mycircle"cx="50"cy="50"r="50"/> </svg>
<svg>的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。
如果只想展示 SVG 图像的一部分，就要指定viewBox属性。
<svgwidth="100"height="100"viewBox="50505050"> <circleid="mycircle"cx="50"cy="50"r="50"/> </svg>
<viewBox>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。
注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。
如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。
2. <circle>标签
<circle>标签代表圆形。
<svgwidth="300"height="180"> <circlecx="30"cy="50"r="25"/> <circlecx="90"cy="50"r="25"class="red"/> <circlecx="150"cy="50"r="25"class="fancy"/> </svg>
上面的代码定义了三个圆。<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于<svg>画布的左上角原点。
class属性用来指定对应的 CSS 类。
.red{
fill:red;
}
.fancy{
fill:none;
stroke:black;
stroke-width:3pt;
}SVG 的 CSS 属性与网页元素有所不同。
fill：填充色stroke：描边色stroke-width：边框宽度
3. <line>标签
<line>标签用来绘制直线。
<svgwidth="300"height="180"> <linex1="0"y1="0"x2="200"y2="0"style="stroke:rgb(0,0,0);stroke-width:5"/> </svg>
上面代码中，<line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。
4. <polyline>标签
<polyline>标签用于绘制一根折线。
<svgwidth="300"height="180"> <polylinepoints="3,330,283,53"fill="none"stroke="black"/> </svg>
<polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
5. <rect>标签
<rect>标签用于绘制矩形。
<svgwidth="300"height="180"> <rectx="0"y="0"height="100"width="200"style="stroke:#70d5dd;fill:#dd524b"/> </svg>
<rect>的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。
6. <ellipse>标签
<ellipse>标签用于绘制椭圆。
<svgwidth="300"height="180"> <ellipsecx="60"cy="60"ry="40"rx="20"stroke="black"stroke-width="5"fill="silver"/> </svg>
<ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。
7. <polygon>标签
<polygon>标签用于绘制多边形。
<svgwidth="300"height="180"> <polygonfill="green"stroke="orange"stroke-width="1"points="0,0100,0100,1000,1000,0"/> </svg>
<polygon>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
8. <path>标签
<path>标签用于制路径。
<svgwidth="300"height="180"> <pathd=" M18,3 L46,3 L46,40 L61,40 L32,68 L3,40 L18,40 Z "></path> </svg>
<path>的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。
M：移动到（moveto）L：画直线到（lineto）Z：闭合路径
9. <text>标签
<text>标签用于绘制文本。
<svgwidth="300"height="180"> <textx="50"y="25">肆客足球</text> </svg>
<text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。
10. <use>标签
<use>标签用于复制一个形状。
<svgviewBox="003010"xmlns="http://www.w3.org/2000/svg"> <circleid="myCircle"cx="5"cy="5"r="4"/> <usehref="#myCircle"x="10"y="0"fill="blue"/> <usehref="#myCircle"x="20"y="0"fill="white"stroke="blue"/> </svg>
<use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。另外，还可以指定width和height坐标。
11. <g>标签
<g>标签用于将多个形状组成一个组（group），方便复用。
<svgwidth="300"height="100"> <gid="myCircle"> <textx="25"y="20">圆形</text> <circlecx="50"cy="50"r="20"/> </g> <usehref="#myCircle"x="100"y="0"fill="blue"/> <usehref="#myCircle"x="200"y="0"fill="white"stroke="blue"/> </svg>
12. <defs>标签
<defs>标签用于自定义形状，它内部的代码不会显示，仅供引用。
<svgwidth="300"height="100"> <defs> <gid="myCircle"> <textx="25"y="20">圆形</text> <circlecx="50"cy="50"r="20"/> </g> </defs> <usehref="#myCircle"x="0"y="0"/> <usehref="#myCircle"x="100"y="0"fill="blue"/> <usehref="#myCircle"x="200"y="0"fill="white"stroke="blue"/> </svg>
13. <pattern>标签
<pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域。
<svgwidth="500"height="500"> <defs> <patternid="dots"x="0"y="0"width="100"height="100"patternUnits="userSpaceOnUse"> <circlefill="#bee9e8"cx="50"cy="50"r="35"/> </pattern> </defs> <rectx="0"y="0"width="100%"height="100%"fill="url(#dots)"/> </svg>
上面代码中，<pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。
14. <image>标签
<image>标签用于插入图片文件。
<svgviewBox="00100100"width="100"height="100"> <imagexlink:href="path/to/image.jpg" width="50%"height="50%"/> </svg>
上面代码中，<image>的xlink:href属性表示图像的来源。
15. <animate>标签
<animate>标签用于产生动画效果。
<svgwidth="500px"height="500px"> <rectx="0"y="0"width="100"height="100"fill="#feac5e"> <animateattributeName="x"from="0"to="500"dur="2s"repeatCount="indefinite"/> </rect> </svg>
上面代码中，矩形会不断移动，产生动画效果。
<animate>的属性含义如下。
attributeName：发生动画效果的属性名。from：单次动画的初始值。to：单次动画的结束值。dur：单次动画的持续时间。repeatCount：动画的循环模式。可以在多个属性上面定义动画。
<animateattributeName="x"from="0"to="500"dur="2s"repeatCount="indefinite"/> <animateattributeName="width"to="500"dur="2s"repeatCount="indefinite"/>
16. <animateTransform>标签
<animate>标签对 CSS 的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签。
<svgwidth="500px"height="500px"> <rectx="250"y="250"width="50"height="50"fill="#4bc0c8"> <animateTransformattributeName="transform"type="rotate"begin="0s"dur="10s"from="0200200"to="360400400"repeatCount="indefinite"/> </rect> </svg>
上面代码中，<animateTransform>的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。
JavaScript 操作SVG
1. DOM操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="00800600" preserveAspectRatio="xMidYMidmeet" > <circleid="mycircle"cx="400"cy="300"r="50"/> <svg>
上面代码插入网页之后，就可以用 CSS 定制样式。
circle{
stroke-width:5;
stroke:#f00;
fill:#ff0;
}
circle:hover{
stroke:#090;
fill:#f8f8f8;
}然后，可以用 JavaScript 代码操作 SVG。
varmycircle=document.getElementById('mycircle');
mycircle.addEventListener('click',function(e){
console.log('circleclicked-enlarging');
mycircle.setAttribute('r',60);
},false);上面代码指定，如果点击图形，就改写circle元素的r属性。
2. 获取 SVG DOM
使用<object>、<iframe>、<embed>标签插入 SVG 文件，可以获取 SVG DOM。
varsvgObject=document.getElementById('object').contentDocument;
varsvgIframe=document.getElementById('iframe').contentDocument;
varsvgEmbed=document.getElementById('embed').getSVGDocument();注意，如果使用<img>标签插入 SVG 文件，就无法获取 SVG DOM。
3. 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。
<divid="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"width="500"height="440" > <!--svgcode--> </svg> </div>
使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
varsvgString=newXMLSerializer()
.serializeToString(document.querySelector('svg'));4. SVG 图像转为 Canvas 图像
首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。
varimg=newImage();
varsvg=newBlob([svgString],{type:"image/svg+xml;charset=utf-8"});
varDOMURL=self.URL||self.webkitURL||self;
varurl=DOMURL.createObjectURL(svg);
img.src=url;然后，当图像加载完成后，再将它绘制到<canvas>元素。
img.onload=function(){
varcanvas=document.getElementById('canvas');
varctx=canvas.getContext('2d');
ctx.drawImage(img,0,0);
};上述就是小编为大家分享的SVG怎么在HTML5中使用了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。
