svg :
网页中绘制复杂图形 采用“矢量图”的形式 -- 更清晰 基于html
与canvas教程不同 采用“位图”的形式 基于html5
实例:兴趣图谱 兴趣图谱
可以很好的与js产生交互效果
引入svg
svg是基于xml技术也可以是一个独立的xml文件
xmlns="http://www.w3.org/2000/svg" 是svg的命名空间 里面包括标签,自定义属性……必写
version = '版本号'
绘制一个圆形 cx :x轴坐标 cy:y轴坐标 r:圆的半径 fill :内部填充的颜色 stroke :边框‘
cxcy设置圆心点坐标,r设置圆的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
//可以通过style也可以不用style
<!-- 一 -->
<circle cx="100" cy="100" r="40" style="fill: pink; stroke:red ; stroke-width:2px;"></circle>
<!-- 二 -->
<!-- <circle cx="100" cy="100" r="40" fill ="lightblue"></circle> -->
</svg>
</body>
</html>
效果图:
stroke-dasharray属性:两个值 ;
第一个值为:虚线的长短 , 第二个值为:每个虚线之间的距离 (数值越大越长,越大越宽)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="40" style="fill: pink; stroke:red ; stroke-width:2px; stroke-dasharray: 43 3;"></circle>
</svg>
</body>
</html>
效果图:
引入svg到页面中有四种方式
先创建一个svg页面,带有svg后缀的名称即可
将所需要的svg写入01.svg当中
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="40" style="fill: pink; stroke:red ; stroke-width:2px; stroke-dasharray: 43 3;"></circle>
</svg>
开始再html页面当中引入 ---- 四种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--直接写到html页面也是ok的 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="40" style="fill: yellow; stroke:red ; stroke-width:2px; stroke-dasharray: 43 3;"></circle>
</svg>
<!-- 通过图片的方式引入svg -->
<img src="./01.svg" />
<!-- 通过背景的方式引入svg -->
<div style="width: 200px; height: 200px; background: url(./01.svg) no-repeat;"></div>
<!-- 通过框架的方式引入svg -->
<iframe src="./01.svg"></iframe>
</body>
</html>
将svg背景设置成透明 -- fill = “transparent/none"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="40" style="fill:transparent; stroke:red ; stroke-width:2px; stroke-dasharray: 43 3;"></circle>
</svg>
</div>
</body>
</html>
矩形:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- x表示距离顶部多少距离 相当于margin-top y 相当于margin-left -->
<!-- 用rx,ry设置rect对角的弧度 rx:边边角椭圆的x值 ry:边边角椭圆的y值 如果只只设置了rx ,那么默认ry的值和rx的值相等 ry同理-->
<rect width="100" height="100" x="10" y="10" fill="pink" stroke="red" ry="38" rx="21"></rect>
</svg>
</div>
</body>
</html>
线:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- line没有fill属性只有stroke属性 -->
<!-- stroke-opcity设置line的透明度,默认是1 完全透明用0 没有transparent的值 -->
<line x1="23" y1="54" x2="100" y2="123" stroke="lightblue" stroke-width="5" stroke-opacity="0.5"></line>
</svg>
</div>
</body>
</html>
<g>标签
他是一个容器(分组标签),是用来 组合元素的,将里的元素看着一个整体 虽然没有什么实际效果,但是可以将元素进行统一效果 同样可以设置id,class……
<g>标签中元素的位移用tramsform = "translate(x,y)"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- <circle cx="30" cy="30" r="30" stroke="black" fill="none"></circle>
<circle cx="30" cy="30" r="25" stroke="black" fill="none"></circle>
<circle cx="30" cy="30" r="20" stroke="black" fill="none"></circle>
<circle cx="30" cy="30" r="15" stroke="black" fill="none"></circle>
<circle cx="30" cy="30" r="10" stroke="black" fill="none"></circle>
<circle cx="30" cy="30" r="5" stroke="black" fill="none"></circle> -->
<!-- 如果将每个圆形一起放在整个盒子的中间,那么需要设置每个圆的cycx值,
如果用g将所有圆包含,那么只需要设置g的位置,就可以将所有的圆居中 -->
<g transform="translate(100,100)" stroke="black" >
<circle r="30" fill="none"></circle>
<circle r="25" fill="none"></circle>
<circle r="20" fill="none"></circle>
<circle r="15" fill="none"></circle>
<circle r="10" fill="none"></circle>
<circle r="5" fill="none"></circle>
</g>
</svg>
</div>
</body>
</html>
文字标签<text>
x ,y 再x轴y轴上的坐标
text-anchor:middle/start/end (文字的左右起始位置对齐效果 其中start = right ,end = left , middle= center)
上下对齐公式 :y = 文字字体大小 / 2 - 2 就可以实现上下对齐了
如果没有设置文字字体大小 那么 y = y + 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="30" fill="none" stroke="black"></circle>
<text x="100" y="108" text-anchor="middle" font-size="20" >hello</text>
<!-- <text x="100" y="105" text-anchor="middle" >hello</text> -->
</svg>
</div>
</body>
</html>
设置共同属性 -- 手指形状的移入效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g style="cursor: pointer;">
<circle cx="100" cy="100" r="30" fill="none" stroke="black" ></circle>
<text x="100" y="108" text-anchor="middle" font-size="20" >hello</text>
<!-- <text x="100" y="105" text-anchor="middle" >hello</text> -->
</g>
</svg>
</div>
</body>
</html>
再svg当中添加图片<image>标签
x,y:
width,height:图片的宽高
xlink:herf = "图片链接”
图片居中的公式:x = x -(width/2) y = y- (height /2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="1000" width="1000">
<g style="cursor: pointer;">
<!-- 居中前 -->
<!-- <image x="100" y="100" width="100" height="100" xlink:href="./imgs/111.png"></image> -->
<!-- 居中后 -->
<image x="0" y="0" width="200" height="200" xlink:href="./imgs/111.png"></image>
<text x="100" y="108" text-anchor="middle" font-size="20" >hello</text>
<!-- <text x="100" y="105" text-anchor="middle" >hello</text> -->
</g>
</svg>
</div>
</body>
</html>
效果:
折线绘制
point中空格可以用逗号代替
points = ‘ 第一个点坐标 第二个点坐标 第三个的坐标……’ --- 默认有填充黑色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
<script>
window.onload = function(){
var svgNS = 'http://www.w3.org/2000/svg';
var oParent = document.getElementById('div1');
}
</script>
</head>
<body>
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="1000" width="1000">
<!-- 折线绘制x1 y1 x2/x1 y2/y1 x2 y2 70 70是前两个值的终端坐标,是后两个值的起点坐标 -->
<!-- 多边形 闭合 -->
<polygon points="20 20 70 70 30 100 80 110 " stroke="black" fill="none"></polygon>
<!-- 折线 不闭合 -->
<polyline points="20 20 70 70 30 100 80 110 " stroke="black" fill="none"></polyline>
</svg>
</div>
</body>
</html>
Path
通过d属性绘制图画 十个相关命令
第一个坐标 (50,100) 第二个点坐标(200,200)第三个点做坐标(100,100)
M表示起始点
Z首位闭合
d = 'M50 100L200 200L100 100' 这个是没有闭合的图像
d = 'M50 100L200 200L100 100Z'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
<script>
window.onload = function() {
var svgNS = 'http://www.w3.org/2000/svg';
var oParent = document.getElementById('div1');
}
</script>
</head>
<body>
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="1000" width="1000">
<!-- <path d="M100 100L70 150L80 80" stroke="black" fill="none"></path> -->
<path d="M100 100L70 150L80 80z" stroke="black" fill="none"></path>
</svg>
</div>
</body>
</html>
H代表水平绘制,V代表垂直绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
<script>
window.onload = function() {
var svgNS = 'http://www.w3.org/2000/svg';
var oParent = document.getElementById('div1');
}
</script>
</head>
<body>
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="1000" width="1000">
<!-- 可以负数 -->
<path d="M70 20v100H-100" stroke="black" fill="none"></path>
</svg>
</div>
</body>
</html>
一共十个值:
大写(绝对坐标):相对距离
小写(相对坐标):相对长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
<script>
window.onload = function() {
var svgNS = 'http://www.w3.org/2000/svg';
var oParent = document.getElementById('div1');
}
</script>
</head>
<body>
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="1000" width="1000">
<!-- 绘制正圆 -->
<!-- <path d="M100 100A100 100 0 1 1 200 200" stroke="red" stroke-width="3" fill="none"></path> -->
<!-- 绘制扇形 -->
<path d="M150 150A100 100 0 0 1 250 150L225 175A50 50 0 0 0 175 175Z" stroke="red" stroke-width="3" fill="none"></path>
</svg>
</div>
</body>
</html>