HTML5系列-SVG了解
咱们对svg进行初步了解javascript
1.介绍css
SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制做矢量图的软件工具。SVG是Adobe Illustrator的主要制做目标。你能够在轻松的网页上使用漂亮的SVG图，但SVG有不少的用法你可能还不知道。html
咱们经过AI能够制做svg，制做的矢量图在AI提供了直接生成svg文件的选择项，还有编辑svg文件的选项功能。html5
3.兼容及相关java
ie9及其以上和其余主流浏览器chrome
他是来自xml的扩展canvas
canvas只能经过js控制绘制，svg经过标签绘制api
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时候的习惯，仍是运行上面的程序，在高级浏览器下预览：
<!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的基本绘制操做就这些，一些实例定义，能够看这里：
相关文章
- 1. HTML5-SVG
- 2. SVG系列一
- 3. 了解SVG
- 4. 深刻理解 SVG 系列（二） —— SVG 坐标系统
- 5. html5之svg
- 6. 【HTML5】——SVG基础
- 7. HTML5 内联 SVG
- 8. Html5 内联SVG
- 9. HTML5 Canvas vs. SVG
- 10. 简单了解svg
- 更多相关文章...
- • Spring体系结构详解 - Spring教程
- • SVG
- SVG 教程 - • 三篇文章了解 TiDB 技术内幕——说存储
- • 三篇文章了解 TiDB 技术内幕 —— 说计算
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他进程嵌入到qt FindWindow获得窗口句柄 报错无法链接的外部符号 [email protected] 无法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的应用-TOPK问题
- 6. 实例演示ElasticSearch索引查询term,match,match_phase,query_string之间的区别
- 7. 数学基础知识 集合
- 8. amazeUI 复择框问题解决
- 9. 背包问题理解
- 10. 算数平均-几何平均不等式的证明,从麦克劳林到柯西
欢迎关注本站公众号,获取更多信息
相关文章
- 1. HTML5-SVG
- 2. SVG系列一
- 3. 了解SVG
- 4. 深刻理解 SVG 系列（二） —— SVG 坐标系统
- 5. html5之svg
- 6. 【HTML5】——SVG基础
- 7. HTML5 内联 SVG
- 8. Html5 内联SVG
- 9. HTML5 Canvas vs. SVG
- 10. 简单了解svg