SVG 入门

Question

SVG 的优点

• SVG 的压缩性率高。
• SVG 图形缩放不损失清晰度。
• 可以为 SVG 元素指定一个事件句柄,响应用户的输入。
• 许多图片编辑应用（包括 Adobe Photoshop、Sketch 和 Inkscape）可将设计作品导出成 SVG 格式，直接复制粘贴到HTML当中。

应用实例：logo 动画

创建两个完全重叠的圆

<svg version="1.1" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="30" />
<circle cx="100" cy="100" r="30"style="fill: orange" />
</svg>

设置这两个圆从其初始位置向外远离的动画

// 将其中一个圆向左移
$("#circleLeft").velocity({ cx: "-=15px" }, { easing: "spring" });
// 将另一个圆向右移
$("#circleRight").velocity({ cx: "+=15px" }, { easing: "spring" });

为SVG元素指定监听鼠标的事件

$("svg").on("mouseover mouseout", function() {
5
$("#circleLeft, #circleRight").velocity("reverse");
});