SVG1.SVG简介SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体矢量图与位图位图:基于颜色的描述,如BMP、PNG、JPG 矢量图:基于数学的描述,如SVG、AI基本图形和属性1.基本图形 <rect><circle><ellipse><line><polyline><polygon> 2.基本属性 fill、stroke、stroke-width、transform示例如下:<svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" rx="5" ry="5" width="150" height="100" stroke="red" fill="none"> </rect> <circle cx="250" cy="60" r="50" stroke="red" fill="none"> </circle> <ellipse cx="400" cy="60" rx="70" ry="50" stroke="red" fill="none"> </ellipse> <line x1="10" y1="120" x2="160" y2="220" stroke="red"> </line> <polyline points="250 120 300 220 200 220" stroke="red" fill="none"> </polyline> <polygon points="250 120 300 220 200 220" stroke="red" stroke-width="5" fill="yellow" transform="translate(150 0)"> </polygon></svg>3.基本操作API创建图形document.createElementNS(ns,tagName);添加图形element.appendChild(childElement);获取/设置属性element.setAttribute(name,value);element.getAttribute(name);
