矢量图和位图
矢量图:基于数学的描述
位图:基于像素点的描述
svg的使用
1、浏览器直接打开svg文件
2、通过IMG标签使用
3、通过SVG标签使用
4、作为CSS背景使用
基本图形和基本属性
基本图形:rect circle ellipse line polyline polygon
基本属性:
fill:填充色
stroke:描边色
stroke-width:描边宽度
transform:图形变换
rect
x:起点x
y:起点y
width:宽度
height:高度
rx:圆角x
ry:圆角y
circle
cx:圆心x
cy:圆心y
r:半径
ellipse
cx:圆心x
cy:圆心y
rx:半径x
ry:半径y
line
x1:起点x
y1:起点y
x2:终点x
y2:终点y
polyline
points:属性(xi, yi)+
xi:第i点x
yi:第i点y
1 <svg xmlns="http://www.w3.org/2000/svg"> 2 <rect 3 x="10" 4 y="10" 5 rx="5" 6 ry="5" 7 width="200" 8 height="200" 9 stroke="red" 10 fill="none"/> 11 12 <circle 13 cx="320" 14 cy="110" 15 r="100" 16 stroke="red" 17 fill="none"/> 18 19 <ellipse 20 cx="530" 21 cy="110" 22 rx="100" 23 ry="80" 24 stroke="red" 25 fill="none"/> 26 27 <line 28 x1="10" 29 y1="220" 30 x2="200" 31 y2="420" 32 stroke="red"/> 33 34 <polyline 35 points="220 220 420 320 220 420" 36 fill="none" 37 stroke="red"/> 38 39 <polygon 40 points="440 220 640 320 440 420" 41 fill="none" 42 stroke="red"/> 43 </svg>
svg api接口
创建图形:document.createElementNS(ns, tagName)
添加图形:appendChild(element)
获取属性:getAttribute(attr)
设置属性:setAttribute(attr, val)
时间: 2024-11-05 23:24:43