SVG 教程
SVG教程
简介
SVG全称为可缩放矢量图形(Scalable Vector Graphics),是一种基于XML语法的标记语言,用于描述静态和动态矢量图形。与其他图像格式(如JPEG、GIF、PNG等)不同的是,SVG可以在任何尺寸下保持清晰度和精度。
SVG优势
-
支持任何尺寸或分辨率,不会失真。
-
可以在任何文本编辑器上进行编辑。
-
可以直接嵌入HTML、CSS和JavaScript中。
-
支持动态交互和动画效果。
基本语法
SVG文档以<svg>
开始,以</svg>
结尾。它由多个形状元素组成,包括直线、折线、多边形、矩形等等。每个形状元素在SVG中都可以用一个或多个属性来定义。
例如,以下代码创建一个红色的矩形,宽度和高度分别为100像素:
<svg>
<rect x="50" y="50" width="100" height="100" fill="red" />
</svg>
其中x和y属性定义矩形的左上角位置,width和height属性定义矩形的尺寸,fill属性定义矩形的颜色。
除了形状元素之外,还可以在SVG中添加文本、图像和路径等元素。
SVG坐标系统
SVG使用笛卡尔坐标系,x轴从左向右延伸,y轴从上向下延伸。因此,原点位于图像的左上角。
可以使用视区元素<svg viewBox="xmin ymin width height">
来指定视区大小和位置。
例如,以下代码创建一个视区大小为300x200像素的SVG图像:
<svg viewBox="0 0 300 200">
<rect x="50" y="50" width="100" height="100" fill="red" />
</svg>
其中,0 0指定了视区的左上角位置,300指定了视区的宽度,200指定了视区的高度。
SVG动画
SVG可以实现简单的动画效果,例如渐变、旋转或移动。可以使用<animate>
元素来实现动画,该元素支持各种属性,如动画方向、持续时间和动画类型等。
例如,以下代码创建一个动画效果,使矩形沿着X轴移动到200像素的位置:
<svg viewBox="0 0 300 200">
<rect x="50" y="50" width="100" height="100" fill="red">
<animate attributeName="x" from="50" to="200" dur="1s" />
</rect>
</svg>
SVG交互
SVG还支持交互功能,例如鼠标悬停、点击事件等。可以使用<rect>
等形状元素的事件属性来添加交互功能。
例如,以下代码创建一个绿色的矩形,当鼠标悬停在矩形上时,会变成蓝色:
<svg viewBox="0 0 300 200">
<rect x="50" y="50" width="100" height="100" fill="green"
onmouseover="this.setAttribute('fill','blue')"
onmouseout="this.setAttribute('fill','green')" />
</svg>
其中,onmouseover
和onmouseout
是鼠标事件属性,在鼠标悬停和离开时分别触发。
总结
SVG是一个功能强大的图形标记语言,可以轻松创建高质量的矢量图形和动画效果。学习SVG的基础知识,能够让页面设计更加出色,增加页面的交互性和动态性。