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中的圖形旋轉(zhuǎn)
transform='rotate(30,250,100)' 對的 //svg中的圖形旋轉(zhuǎn) 后兩位為旋轉(zhuǎn)中心
svg 在JS中如何操作屬性和樣式
假設(shè)svg的id為#r1;
var oR = document.querySelector('#r1');
屬性:
oR.setAttribute('屬性','屬性值')
樣式:
oR.style.樣式名='樣式值'
創(chuàng)建svg中的標(biāo)簽
createElementNS （命名空間括授，標(biāo)簽）
var oRect = document.createElementNS('http://www.w3.org/2000/svg','rect');
設(shè)置oRect的屬性插入svg中
insertBefore -> 一樣
appendChild -> 一樣
svg 標(biāo)簽
line //線
rect //矩形
circle //圓形
ellipse //橢圓
path //鏈接線
line 屬性
x1 y1 x2 y2 四個點(diǎn)
stroke 邊框顏色
stroke-width 邊框?qū)挾?br>
stroke-opacity 邊框透明
stroke-linecap="round" 線端點(diǎn)圓形一個邊框的寬度
butt 默認(rèn)
square 延伸一個邊框的寬度
stroke-linejoin="bevel" 形狀角斜切
miter 默認(rèn)
round 圓形
stroke-dasharray 創(chuàng)建虛線
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插件
官網(wǎng) http://dmitrybaranovskiy.github.io/raphael/
api http://dmitrybaranovskiy.github.io/raphael/reference.html
