svg 和 canvas的区别

工具canvassvg绘图类型位图矢量图缩放失真不失真颜色细节丰富单调运用领域图片、游戏图标、地图、统计图内容JS绘图每个图形都是标签事件绑定只能在canvas标签上绑定非常方便

svg 矢量图

绘制的元素标签包含在svg内部

分组标签

在分组中的元素可以自动继承公共属性或样式

<svg><g>有相同属性的元素</g></svg>

动态创建svg相关的标签

// 1.创建 var oRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); //svg元素的nodeName都是纯小写形式，和普通的ＨＴＭＬ元素不同 // 2.设置属性 oRect.setAttribute('属性名','属性值'); // 获取属性值 oRect.getAttribute('属性名');

矩形+多边形

<!-- 矩形 --><!-- x和y如果不给值，默认都是0，在左上角绘制 --> <svg><rect width="100" height="100" x='100' y ='100' fill=''></rect></svg> <!-- 多边形 需要闭合 --> <svg><polygon points="x1,y1 x2,y2 x3,y3 ...." stroke =''></polygon></svg>

绘制圆形+椭圆

<!-- 圆 --> <svg><circle cx="圆心x轴坐标" cy="圆心y轴坐标" r ="半径" fill="填充色" fill-opacity="颜色透明度"></circle></svg> <!-- 椭圆 --> <svg><ellipse cx = 'x轴上的圆心' cy='y轴上的圆心' rx='x轴上的半径' ry='y轴上的半径'></ellipse></svg>

绘制直线+折线

<!-- 直线 --> <svg><line x1="" y1="" x2="" y2="" stroke="red" ></line></svg> <!-- 折线 --> <svg><polyline points="x1,y1 x2,y2 x3,y3 ...." stroke =''></polyline></svg>

绘制文本+图像

<!-- 文本 文本基线：aligment-baseline 值：before-edge（默认）hanging（悬挂）after-edge --> <svg><text x="" y="" font-size="" aligment-baseline="before-edge">文本内容</text></svg> <!-- 图像 --> <svg><image width="" height="" xlink:href="xxx.jpg" x="" y=""></image></svg>

渐变

线性渐变 <svg width="600" height="400" id="svg"> <!-- 1.定义渐变 --> <defs> <!-- x1="0" y1="0" x2="0" y2="100%" 两个坐标点决定渐变的方向 --> <linearGradient id="lg1" x1="0" y1="0" x2="0" y2="100%"> <!-- 1.2添加色标 --> <stop stop-color="red" offset="0%"></stop> <stop stop-color="orange" offset="10%"></stop> <stop stop-color="green" offset="20%"></stop> <stop stop-color="pink" offset="30%"></stop> <stop stop-color="blue" offset="50%"></stop> <stop stop-color="gray" offset="60%"></stop> <stop stop-color="cyan" offset="70%"></stop> <stop stop-color="gold" offset="80%"></stop> <stop stop-color="purple" offset="90%"></stop> <stop stop-color="yellow" offset="100%"></stop> </linearGradient> </defs> <!-- 2.引用渐变--> <rect x="100" y ="100" width="200" height="100" style="fill: url(#lg1);"></rect> <circle cx="300" cy="300" r ="50" fill="url(#lg1)"></circle> </svg> 辐射性渐变 贝塞尔路径 暂待

特效对象 – 滤镜(filter)

<svg width="600" height="400" id="svg"> <defs> <!-- 1.定义特效 --> <filter id="fil1"> <feGaussianBlur stdDeviation="3"></feGaussianBlur> </filter> </defs> <!-- 2.引用特效 --> <text x="50" y="100" font-size="70" filter="url(#fil1)">我和我的祖国</text> </svg>