<svg>标签属性详解,HTML中svg标签的作用
<svg>标签属性详解,HTML中svg标签的作用
代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那咱们先来看看SVG图片都有哪些优势：
SVG可被非常多的东西读取和修正(比方记事本)
SVG与JPEG和GIF图画比起来，尺寸更小，且可压缩性更强。
SVG是可弹性的
SVG图画可在任何的分辨率下被高质量地打印
SVG可在图画质量不下降的情况下被扩大
SVG图画中的文本是可选的，同时也是可搜索的(很适合制造地图)
SVG能够与Java技术一起运行
SVG是开放的规范
SVG文件是朴实的XML
几个SVG图片小例子：
cc80b17cec5b
image
咱们来看一下第三个共享图标的代码：
不了解SVG的同学现在必定一脸问号，就跟我第一次见他们一样，别着急，咱们从根底看起。
什么是SVG？
SVG是一种根据XML语法的图画格式，全称是可缩放矢量图(ScalableVectorGraphics)。其他图画格式都是根据像素处理的，SVG则是属于对图画的形状描述，所以它本质上是文本文件，体积较小，且不论扩大多少倍都不会失真。此外SVG是万维网联盟的规范，SVG与比如DOM和XSL之类的W3C规范是一个整体。
怎么运用？
在HTML5中，您能够将SVG元素直接嵌入HTML页面中,例如上面的那颗小红心：
SVG代码也能够写在一个以.svg完毕的文件中，然后用、、、等标签刺进网页。
search.svg
CSS也能够运用svg
.logo{
background:url(logo.svg);
}
SVG文件还能够转为BASE64编码，然后作为DataURI写入网页。
SVG的语法
1.标签
SVG代码都放在顶层标签之中。下面是一个例子。
的width特点和height特点，指定了SVG图画在HTML元素中所占据的宽度和高度。除了相对单位，也能够选用绝对单位(单位：像素)。假如不指定这两个特点，SVG图画默认巨细是300像素(宽)x150像素(高)。
假如只想展现SVG图画的一部分，就要指定viewBox特点。
特点的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG图画是100像素宽x100像素高，viewBox特点指定视口从(50,50)这个点开端。所以，实践看到的是右下角的四分之一圆。
留意，视口有必要适配地点的空间。上面代码中，视口的巨细是50x50，因为SVG图画的巨细是100x100，所以视口会扩大去适配SVG图画的巨细，即扩大了四倍。
假如不指定width特点和height特点，只指定viewBox特点，则相当于只给定SVG图画的长宽比。这时，SVG图画的默认巨细将等于地点的HTML元素的巨细。
2.标签
标签代表圆形。
上面的代码定义了三个圆。标签的cx、cy、r特点分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于画布的左上角原点。
class特点用来指定对应的CSS类。
.red{
fill:red;
}
.fancy{
fill:none;
stroke:black;
stroke-width:3pt;
}
SVG的CSS特点与网页元素有所不同。
fill：填充色
stroke：描边色
stroke-width：边框宽度
3.标签
标签用来制作直线。
上面代码中，标签的x1特点和y1特点，表明线段起点的横坐标和纵坐标；x2特点和y2特点，表明线段结尾的横坐标和纵坐标；style特点表明线段的款式。
4.标签
标签用于制作一根折线。
的points特点指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
5.标签
标签用于制作矩形。
的x特点和y特点，指定了矩形左上角端点的横坐标和纵坐标；width特点和height特点指定了矩形的宽度和高度(单位像素)。
6.标签
标签用于制作椭圆。
的cx特点和cy特点，指定了椭圆中心的横坐标和纵坐标(单位像素)；rx特点和ry特点，指定了椭圆横向轴和纵向轴的半径(单位像素)。
7.标签
标签用于制作多边形。
的points特点指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
8.标签
标签用于制途径。
的d特点表明制作次序，它的值是一个长字符串，每个字母表明一个制作动作，后面跟着坐标。
M：移动到(moveto)
L：画直线到(lineto)
Z：闭合途径
9.标签
标签用于制作文本。
肆客足球
的x特点和y特点，表明文本区块基线(baseline)起点的横坐标和纵坐标。文字的款式能够用class或style特点指定。
10.标签
标签用于仿制一个形状。
的href特点指定所要仿制的节点，x特点和y特点是左上角的坐标。另外，还能够指定width和height坐标。
11.标签
标签用于将多个形状组成一个组(group)，方便复用。
圆形
12.标签
标签用于自定义形状，它内部的代码不会显现，仅供引用。
圆形
13.标签
标签用于自定义一个形状，该形状能够被引用来平铺一个区域。
上面代码中，标签将一个圆形定义为dots形式。patternUnits="userSpaceOnUse"表明的宽度和长度是实践的像素值。然后，指定这个形式去填充下面的矩形。
14.标签
标签用于刺进图片文件。
width="50%"height="50%"/>
上面代码中，的xlink:href特点表明图画的来源。
15.标签
标签用于产生动画作用。
上面代码中，矩形会不断移动，产生动画作用。
的特点意义如下。
attributeName：产生动画作用的特点名。
from：单次动画的初始值。
to：单次动画的完毕值。
dur：单次动画的持续时间。
repeatCount：动画的循环形式。
能够在多个特点上面定义动画。
16.标签
标签对CSS的transform特点不起作用，假如需求变形，就要运用标签。
上面代码中，的作用为旋转(rotate)，这时from和to特点值有三个数字，第一个数字是视点值，第二个值和第三个值是旋转中心的坐标。from="0200200"表明开端时，视点为0，环绕(200,200)开端旋转；to="360400400"表明完毕时，视点为360，环绕(400,400)旋转。
JavaScript操作SVG
1.DOM操作
假如SVG代码直接写在HTML网页之中，它就成为网页DOM的一部分，能够直接用DOM操作。
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="00800600"
preserveAspectRatio="xMidYMidmeet"
>
上面代码刺进网页之后，就能够用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.获取SVGDOM
运用、、标签刺进SVG文件，能够获取SVGDOM。
varsvgObject=document.getElementById('object').contentDocument;
varsvgIframe=document.getElementById('iframe').contentDocument;
varsvgEmbed=document.getElementById('embed').getSVGDocument();
留意，假如运用标签刺进SVG文件，就无法获取SVGDOM。
3.读取SVG源码
因为SVG文件便是一段XML文本，因而能够通过读取XML代码的方法，读取SVG源码。
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"width="500"height="440"
>
运用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;
然后，当图画加载完成后，再将它制作到元素。
img.onload=function(){
varcanvas=document.getElementById('canvas');
varctx=canvas.getContext('2d');
ctx.drawImage(img,0,0);
};
小结
SVG能做的远不止这些，利用SVG做的动画作用，文字作用咱们今后给我们具体讲解，今天就先到这里吧。
作品标签： HTML
优秀作品：
评论列表（共128人参与）参与讨论或分享设计作品获得视觉癖积分奖励
nk属性(注册会员
2021-08-21 23:38:7
，是日本的一位插画家，代表著作有《魔法禁书目录》系列插画和轻小说《魔法禁书目录》系列等。 3、张光宇 张光宇长于师们大多薪资丰盛，在大中型外企，资深的游戏原画规划师最高月薪可达2至3万元，一般的美术规划师也在40
回复
ly属性注册会员
2021-08-21 11:6:20
性详解,HT游客
2021-08-21 10:37:22
游客37208：<svg>标签div> 宣布以下建议： 一、要把节约用水放在日常日子傍边，充分认识节水的必要性和重大意义，树立杰出的节约用水意识，养成杰出的节约用水习
回复
