SVG
1.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);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。