与canvas不同的svg画图_H5之家 - 中国HTML5教程资源分享第一站

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 content=""> <meta content=""> <link href="" target="_blank"> <style> *{ margin: 0;padding: 0; } body{ background: #000; } svg{ background: #fff; } line{ stroke-width:10px; stroke:green; } </style> </head> <body> <svg> <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" 起始位置

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插件
官网
api