与canvas不同的svg画图
svg画图API:
svg 画图适合做什么: 矢量图 图表 性能一般 交互容易
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
margin: 0;padding: 0;
}
body{
background: #000;
}
svg{
background: #fff;
}
line{
stroke-width:10px; stroke:green;
}
</style>
</head>
<body>
<svg width="800" height="600">
<line x1="100" y1="100" x2="300" y2="300"></line>
</svg>
</body>
</html>
svg 属性
width height background
transform='rotate(30deg)' 错的 //svg中的图形旋转
transform='rotate(30,250,100)' 对的 //svg中的图形旋转 后两位为旋转中心
svg 在JS中如何操作属性和样式
假设svg的id为#r1;
var oR = document.querySelector('#r1');
属性:
oR.setAttribute('属性','属性值')
样式:
oR.style.样式名='样式值'
创建svg中的标签
createElementNS （命名空间，标签）
var oRect = document.createElementNS('http://www.w3.org/2000/svg','rect');
设置oRect的属性插入svg中
insertBefore -> 一样
appendChild -> 一样
svg 标签
line //线
rect //矩形
circle //圆形
ellipse //椭圆
path //链接线
line 属性
x1 y1 x2 y2 四个点
stroke 边框颜色
stroke-width 边框宽度
stroke-opacity 边框透明
stroke-linecap="round" 线端点圆形一个边框的宽度
butt 默认
square 延伸一个边框的宽度
stroke-linejoin="bevel" 形状角斜切
miter 默认
round 圆形
stroke-dasharray 创建虚线
fill 填充颜色
rect 属性
x="100" y="100" 起始位置
width="200"
height="100"
rx="100" 横向半径
ry="50" 纵向半径
circle 属性
cx="100" cy="100" 起始位置
r="50" 半径
ellipse 属性
cx="300" cy="300" 起始位置
rx="300" 横向半径
ry="100" 纵向半径
path 属性
d="M291 299, L572 460, L727 353 Z"
M moveTo
L lineTo
Z 闭合
大写的时候
M 绝对定位 √
小写的时候
m 相对定位
L可以省略但是不要省略
如果Boss需要让咱们兼容IE6+可以使用以下插件:
raphael插件
官网 http://dmitrybaranovskiy.github.io/raphael/
api http://dmitrybaranovskiy.github.io/raphael/reference.html
