一、svg的引入方式
如代码：
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" > //这里是引入svg代码
<circle cx="250" cy="250" r="100" fill="red"></circle> //这里的circle标签是画园的意思
</svg>
</div>
二、画圆
circle:圆形
圆心坐标 cx,cy
半径 r
stlye样式
fill、stroke、stroke-width
如： fill = “none/transparent”
具体用法;
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<circle cx="250" cy="250" r="100" stroke="red" fill="none" stroke-width="10"></circle> //这里 fill = none 的理由是这个圆标签默认是填充背景颜色
</svg>
</div>
结果
三、rect : 矩形
width height 宽高
坐标 x, y
圆角 rx,ry
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<rect width="100" height="100" x="200" y="200" stroke="red" fill="none"></rect>
</svg>
</div>
四、line :线条
起点：x1,y1
终点：x2,y2
stroke-opacity 透明
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="10" stroke-opacity="0.5"></line>
</svg>
</div>
五、polyline:折线
points:点坐标（x1 y1 x2 y2…）或(x1,y1,x2,y2…)
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<polyline points="50 50 100 100 200 100 100 50" stroke="red" fill="none" stroke-width="10"></polyline>
</svg>
</div>
六、polygon:多边形
折线闭合，用法和上面折线一样
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<polygon points="50 50 100 100 200 100 100 50" stroke="red" fill="none" stroke-width="10"></polygon>
</svg>
</div>
七、g标签:组合元素，设置元素公共属性
如具体用法：
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<g transform = "translate(250,250)" stroke="red" fill="none" stroke-width="10"> //<g> 里面的属性是其标签内的所有东西共有的属性 ，transform="translate(,)" 是把中心点比如圆点移动某点
<circle r="20"></circle>
<circle r="50"></circle>
<circle r="80"></circle>
<circle r="110"></circle>
<circle r="140"></circle>
</g>
</svg>
</div>
八、text标签
x, y, 位置
text-anchor(对齐start end middle)
font-size
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<g stroke="red" fill="none" stroke-width="1">
<circle cx="250" cy="250" r="80"></circle>
<text x="250" y="266" font-size="40" text-anchor="middle">流批</text>
</g>
</svg>
</div>
九、image 标签
x, y, 位置
width height 大小
xlink:href(图片地址)
八、path: 路径
d属性
M(起始坐标),L(结束坐标),H(水平线),V(垂直线),A(圆弧),Z(闭合路劲)
C,S,Q,T 贝塞尔曲线
大写为绝对坐标(具体的坐标位置)
小写为相对坐标(相对起始坐标点的具体长度)
A命令
x半径 y半径 角度 弧长(0 小弧 1大弧) 方向(0逆时针 1顺时针)
终点(x y)
如1、
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M50 50L200 200L300 200" stroke="red" stroke-width="10" fill="none" ></path> //代表起点为50，50 L就像lineTo一样
</svg>
</div>
如2、
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M50 50L200 200L300 200Z" stroke="red" stroke-width="10" fill="none" ></path> 加个Z 就相当于终点，相当于多边形一样
</svg>
</div>
如3、
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M50 50L200 200L300 200ZM50 150L200 350L300 350Z" stroke="red" stroke-width="10" fill="none" ></path> //这里是两个多边形
</svg>
</div>
如4、
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M50 50L200 200H300V400Z" stroke="red" stroke-width="10" fill="none" ></path> //H代表水平线上到（300，0）这个点 ，V垂直线上到达（0,400）
</svg>
</div>
如5、
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M100 100A50 50 100 1 1 100 200L100 250" stroke="red" stroke-width="2" fill="none" ></path> //A代表圆
//A50 50 100 1 1 100 200
// M起点 x半径 y半径 角度 弧长(0 小弧 1大弧) 方向(0逆时针 1顺时针) 终点
</svg>
</div>
一、C命令：三次贝塞尔曲线
(x1,y1,x2,y2,x,y) x1,y1 控制点一 x2,y2 控制点二 x,y 结束点
用法：
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M50 50C150 100 200 100 250 50"></path>
</svg>
</div>
图：
二、S命令：平滑贝塞尔曲线(自动对称一个控制点)
(x2,y2,x,y) x2,y2控制点 x,y结束点
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M50 50S200 100 250 50"></path>
</svg>
</div>
三、Q命令：二次贝塞尔曲线
(x1,y1,x,y) x1,y1控制点 x,y结束点
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M50 50Q200 200 250 50"></path>
</svg>
</div>
四、T命令：一次贝塞尔曲线
(x,y)结束点
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<path d="M50 50T250 50"></path>
</svg>
</div>
五、stroke-dasharray:a,b/a,b,c,d…绘制虚线
具体用法
line{
stroke:#f00;
fill:none;
stroke-width:10;
/*stroke-linecap:square;*/
stroke-dasharray:15,5,5,10,15; //看这段代码
}
</style>
</head>
<body><!--身体-->
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" >
<line x1="50" y1="50" x2="250" y2="50"></line>
</svg>
</div>
第一个红块15px 第二个空格5 第三个红块5 第四个空白10 第五个红块15
第六个空白是15px 以此类推
六、用svg是时钟
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
#box{
width:500px;
height:500px;
margin:100px auto;
background:#fff;
}
circle{
stroke:#ff0066;
stroke-width:10px;
}
path{
stroke-linecap:round;
}
circle{
stroke:#ff0000;
stroke-width:10px;
}
#hour{
stroke:#ccff00;
stroke-width:30px;
}
#min{
stroke:#ffcc00;
stroke-width:20px;
}
#sec{
stroke:#0000ff;
stroke-width:10px;
}
line{
stroke:#ff0066;
stroke-width:10px;
}
</style>
<body>
<div id="box">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg">
<circle cx="250" cy="250" r="200"></circle>
<path d="M250 250L250 150" id="hour"></path>
<path d="M250 250L250 120" id="min"></path>
<path d="M250 250L250 80" id="sec"></path>
</svg>
</div>
<script>
var svgNS = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svg');
var hour = document.getElementById('hour');
var min = document.getElementById('min');
var sec = document.getElementById('sec');
//下面这个方法是把创造一个svg标签，并且把第二个参数赋予它做为值
function createSvg( tag , attr ){
var oEle = document.createElementNS( svgNS , tag);
for ( var n in attr )
{
oEle.setAttribute( n , attr[n] ); //这里就是设置值，并且属于oEle
}
return oEle;
}
//下面这个算法是算出时钟上刻度，它使用的方法是在标签line内的两个点产生的线段，那下面就是解决如何获得每一个时针刻度上的两点，在时钟圆内在设置一个圆，两个圆之间设置刻度，在圆的直径上，这里可以得到外圆和内圆的两个点，然后可以设置一条刻度，然后每隔30度在设置一条刻度，那么就要算出，在相对直径30度圆弧上内圆与外圆上的点，才能通过line产生线段，比如说相对直径30度的边，这条边与内圆，外圆相互触碰到点，就是我们要求出来的点，由此可以通过数学公式，半径 * cos 30度 可以得到水平方向上，圆心离这个点的水平距离，半径*sin*30 就是垂直放方向上圆心离这点的距离，具体方法如下
var R = 200; //外圆半径
var r = 180; //内圆半径
var centerX = 250; //圆心离左边的距离
var centerY = 250;
var x1y1 = [{ x : 430 , y : 250 }]; //先定义一个直径上的内圆点
var x2y2 = [{ x : 450 , y : 250 }]; //外圆的点
for ( var i=0;i<12;i++ )
{
var x1 = Math.cos(i*30*Math.PI/180)*r + centerX;
var y1 = Math.sin(i*30*Math.PI/180)*r + centerY;
x1y1.push({ x : x1 , y : y1 }); //把算出来的点放到数组x1y1 里面，这时候数组里面的值都是 xy
var x2 = Math.cos(i*30*Math.PI/180)*R + centerX;
var y2 = Math.sin(i*30*Math.PI/180)*R + centerY;
x2y2.push({ x : x2 , y : y2 });
}
for ( var i=0;i<=12;i++ )
{
var oLine = createSvg( "line" , { //这里是把数组里的xy值赋值 x1,y1 x2,y2 这里使用了这个方法之后 就可以产生刻度
x1 : x1y1[i].x,
y1 : x1y1[i].y,
x2 : x2y2[i].x,
y2 : x2y2[i].y
});
svg.appendChild(oLine);
}
setInterval(function(){
function rotate( oEle , deg ){
oEle.setAttribute( "transform" , "rotate("+deg+" 250 250)"); //这里设置值
}
var date = new Date();
var h = date.getHours()%12;
var m = date.getMinutes();
var s = date.getSeconds();
rotate( hour , 30*(h+m/60));
rotate( min , 6*m );
rotate( sec , 6*s );
},1000);
</script>
</body>
</html>
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
