码迷，mamicode.com
首页 > Web开发 > 详细

HTML5系列-SVG了解

时间：2016-06-23 18:44:54      阅读：301      评论：0      收藏：0      [点我收藏+]

标签：

我们对svg进行初步了解

1.介绍

SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图，但SVG有很多的用法你可能还不知道。

我们通过AI可以制作svg，制作的矢量图在AI提供了直接生成svg文件的选择项，还有编辑svg文件的选项功能。

3.兼容及相关

ie9及其以上和其他主流浏览器

他是来自xml的扩展

canvas只能通过js控制绘制，svg通过标签绘制

3.实用到html页面

--1.创建svg文件，后缀名是.svg，保存成svg.svg

<?xml version="1.0" standalone="no"?>  
  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
  
<svg width="100%" height="100%" version="1.1"  
xmlns="http://www.w3.org/2000/svg">  
  
<circle cx="100" cy="50" r="40" stroke="black"  
stroke-width="2" fill="red"/>  
</svg>

其中

circle cx="100" cy="50" r="40" stroke="black"  
stroke-width="2" fill="red"/>

是绘制处理，我们看单词应该是一个红色圆形的绘制，半径40，描边宽度是2，和我们的canvas的dom api差不多名字

--2.embed标签引入外部svg文件

html结构如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body> 
<embed src="svg.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> 
  
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

这是html5提供的新标签，作为外部内容和插件引入处理。

--3.object标签引入外部svg文件

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body> 
<object data="svg.svg" width="300" height="100"   
type="image/svg+xml"  
codebase="http://www.adobe.com/svg/viewer/install/" />  
  
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

object是以前就有的标签，还可以引入视频，音频等等文件。

--4.iframe标签引入外部svg文件

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body> 
<iframe src="svg.svg" width="300" height="100">  
</iframe>  
  
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

浮动框架标签以前我们都是引入外部的html页面，同样可以引入svg。

--5.html页面内部写svg标签

<!<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

我们最喜欢的方式，写法确实不是很好，这样就会和我们的html标签交错。

--6.svg外部文件做图片引入

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body> 
 <img src="svg.svg"  width="300" />
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

--7.svg外部文件做css背景引入

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  .svg{background: url(‘svg.svg‘) no-repeat center;height: 300px;width: 300px;
}
  </style>
<title>demo</title>
</head>
<body> 
<div class="svg"></div>
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

总结：

svg页面可以做背景图

可以充当图片资源

可以作为外部对象被引用标签引入

可以在html页面内部以标签形式创建。

学习SVG的各种绘制标签

1.一份demo演示程序

我们都采用html页面内标签形式创建，比较符合我们写div时候的习惯，还是运行上面的程序，在高级浏览器下预览：

<!DO<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

显示效果：技术分享

这种写法和我们书写html几乎没有任何的区别，相对canvas要用js的绘制我们理解更容易。

svg是一对闭合标签，就是创建了绘制的舞台画布，

circle是绘制处理标签，绘制圆形，里面的属性就是绘制的具体操作。

既然有绘制圆形，通过对canvas的了解就可以想到对应存在：矩形，线，曲线，贝塞尔曲线等的绘制标签。

2.利用js进行动态处理

我们利用js对dom的操作，同样给circle加入id，找到和进行处理：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa">
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

利用dom找到aa，然后点击事件的处理修改绘制属性，我们发现变成了5，证明js+dom操作同样适合对svg的处理。

3.绘制矩形

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

绘制矩形就是rect标签，预览看演示就知道 x y width height style中的stroke等的用途了。

我认为几个注意地方：

1.标签闭合，我们demo是没闭合的，这样在绘制多个会出现问题

2.svg标签的宽高属性表示画布大小，标签闭合

4.绘制圆形

已经在上面涉及circle标签定义。

4.绘制椭圆

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd;
stroke:#aaa;stroke-width:2"/></ellipse>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

 使用ellipse标签，cx cy标签圆心，rx ry表示在水平和垂直的半径

5.绘制线条

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd;
stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

 使用line标签，其实坐标配对实现

6.绘制多边形

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd;
stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/></polygon>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

 使用polygon标签，在 points里每对坐标之间用空格分割，定了3组就是三角形

 7.绘制多边形

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd;
stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/></polygon>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/></polyline>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

使用polyline标签，用法和多边形一样

 8.绘制路径

这里是最灵活的处理，我们可以实现各种自定义的绘制，基本的参数：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

有一半可以和我们canvas的路径绘制对应上。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

操作是moveto其实坐标，连接到 lineto 连接到lineto 最后closepath，实现闭合，形成了三角形绘制。

我们利用贝塞尔绘制一次，用的是c，贝塞尔包含2组控制点，起始点由前面接口创建，最后写一个结束点，所以c会写3组坐标

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 C150 350 350 350 500 500" style="fill:#fff;stroke:#000;stroke-width:2"/>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

我们把填充设置为白色，看见一条如同ps钢笔工具的路径出现了。

svg的基本绘制操作就这些，一些实例定义，可以看这里：

http://www.w3school.com.cn/svg/svg_examples.asp

HTML5系列-SVG了解

标签：

原文地址：http://www.cnblogs.com/sun927/p/5611771.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！