SVG矢量图
2017-06-08 本文已影响0人
飞鱼_JS
SVG
定义
矢量图工具， 绘图
SVG在H5标准之前就有了， IE对SVG的兼容性非常好
svg与canvas区别
- canvas位图， svg是矢量图
- canvas使用JavaScrpt绘图， svg使用XML来绘图
- canvas不支持事件（借助库） svg支持事件
svg的应用领域
- 矢量图标
- 地图
SVG的使用
<svg><rect><circle><line><path><ellipse><polygon>- .....
示例
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400" style="border:1px solid #ccc">
<rect x="50" y="50" width="200" height="50" fill="red" stroke="green" stroke-width="10" />
<circle cx="300" cy="200" r="100" fill="red"/>
<line x1="50" y1="300" x2="350" y2="300" stroke="green" stroke-width="10" />
</svg>
</body>
HTML中使用SVG
- 在html中直接写 <svg>
<embed src="" type="image/svg+xml" width="" height=""><object data="" type="image/svg+xml" width="" height=""><iframe src="">
示例
<body>
<embed src="../svgs/clock.svg" type="image/svg+xml" width="400">
<object data="../svgs/shake.svg" type="image/svg+xml" width="400"></object>
<iframe src="../svgs/live_fill.svg" frameborder="0" width="400" height="400"></iframe>
</body>
