SVG 教程

SVG教程

简介

SVG全称为可缩放矢量图形（Scalable Vector Graphics），是一种基于XML语法的标记语言，用于描述静态和动态矢量图形。与其他图像格式（如JPEG、GIF、PNG等）不同的是，SVG可以在任何尺寸下保持清晰度和精度。

SVG优势

  1. 支持任何尺寸或分辨率，不会失真。

  2. 可以在任何文本编辑器上进行编辑。

  3. 可以直接嵌入HTML、CSS和JavaScript中。

  4. 支持动态交互和动画效果。

基本语法

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的基础知识，能够让页面设计更加出色，增加页面的交互性和动态性。

SVG 实例 SVG 模糊效果