SVG
2017-11-04 本文已影响9人
akubaba
内容整理自网上！
1、什么是SVG?
1) SVG指可伸缩矢量图形(Scalable Vector Graphics)
2) SVG用来定义用于网络的基于矢量的图形
3) SVG使用XML格式定义图形
4) SVG图像在放大或改变尺寸的悄况下其图形质皿不会有损失
5) SVG是万维网联盟的标准
2、SVG的优势:
1) SVG图像可通过文本编辑器来创建和修改
2) SVG图像可被搜索、索引、脚本化或压缩
3) SVG是可伸缩的
4) SVG图像可在任何的分辨率下被高质量地打印
5) SVG可在图像质量不下降的悄况下被放大
3、绘制矢量图形
<body>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
<circle cx="60" cy="60" r="50"></circle>
</svg>
<!--cx 圆心x坐标-->
<!--cy 圆心y坐标-->
<!--r 半径-->
</body>
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/SVG
操作几个实例：
1、https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/feGaussianBlur
投影
代码：
<body>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="4" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)"></circle>
</svg>
</body>
2、https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animateMotion
会动的
代码：
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey" stroke-width="2"
fill="none" id="theMotionPath"/>
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<!-- Here is a red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg>
