SVG绘制图形
2017-08-01 13:45
267 查看
一、SVG介绍
1、SVG指可伸缩矢量图片2、SVG用来定义用于网络的基于矢量的图形
3、SVG使用XML格式定义图形
4、SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
5、SVG是万维网联盟的标准
二、SVG的优势
1、SVG图像可通过文本编辑器来创建和修改2、SVG图像可被搜索、索引、脚本化或压缩
3、SVG是可伸缩的
4、SVG图像可在任何分辨率下被高质量地打印
5、SVG可在图像质量不下降的情况下被放大。
三、绘制SVG图形
<!--绘制圆形 fill为填充颜色、stroke为边框,stroke-width为边框宽度--> <svg width="120" height="120" viewBox="0 0 120 120" version="1.1"> <circle cx="60" cy="60" r="50" fill="red" stroke="black" stroke-width="3"></circle> </svg>
<!--绘制椭圆--> <svg width="120" height="120" viewBox="0 0 120 120" version="1.1"> <ellipse cx="60" cy="60" rx="50" ry="25"></ellipse> </svg>
<svg width="120" height="120" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3" /> </svg>
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1,10,110" fill="none" id="theMotionPath" stroke="lightgrey" stroke-width="3" /> <circle cx="10" cy="110" r="3" fill="lightgrey"></circle> <circle cx="110" cy="10" r="3" fill="lightgrey"></circle> <circle cx="" cy="" r="5" fill="red"> <animateMotion dur="6s" repeatCount="indefinite"> <mpath xlink:href="#theMotionPath"></mpath> </animateMotion> </circle> </svg>
<?xml version="1.0"?> <svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"/> </rect> </svg>
相关文章推荐
- 基于SVG的web页面图形绘制API介绍及编程演示
- HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
- 利用SVG path绘制图形--基本图形
- 突袭HTML5之SVG 2D入门2 - 图形绘制
- svg 图形绘制
- web端图形绘制--VML--SVG
- 利用SVG path绘制图形--命令
- 突袭HTML5之SVG 2D入门2 - 图形绘制
- 【D3.js数据可视化系列教程】--(十五)SVG基本图形绘制
- SVG(可缩放矢量图形)绘制工具Method Draw
- 基于SVG的web页面图形绘制API介绍及编程演示
- HTML5之SVG 2D入门2 - 图形绘制
- HTML5 SVG图形轮廓线条绘制动画插件-vivus
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
- d3 svg 基本图形绘制
- d3.js 之SVG:矢量化图形绘制
- HTML5之图形绘制技术(Canvas Vs SVG)
- SVG关注复杂图形的网页绘制技术
- 利用SVG path绘制图形--命令
- 基于SVG的web页面图形绘制API介绍