SVG元素

SVG是Scalable Vector Graphics的缩写，它是一个基于XML语法的2D矢量图形格式。SVG支持动画、互动和高度可定制化的图形展示。SVG可以被HTML元素引入，也可以单独成为一个文件使用。

SVG元素简介

SVG元素是用来创建可缩放矢量图形的基础元素。

SVG元素有以下常见属性：

• width 和 height：定义SVG画布的宽度和高度。
• viewBox：定义画布内显示的矢量图形部分的左上角(x,y)坐标和宽高(w,h)。
• preserveAspectRatio：定义矢量图形如何适应视口。

以下是一个简单的SVG元素代码片段：

<svg width="200" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>

这个代码片段创建了一个半径为40的绿色圆形，在100x100的画布上被放大2倍并显示在中间。

SVG图形元素

除了基础的SVG元素属性，SVG还包含了许多不同的图形元素来创造复杂的矢量图形。

下面是一些常用的图形元素：

• 矩形元素（）：用来创建矩形。
• 圆形元素（）：用来创建圆形。
• 椭圆元素（）：用来创建椭圆。
• 线条元素（）：用来创建直线。
• 折线元素（）：用来创建折线。
• 多边形元素（）：用来创建多边形。

这些元素可以被用来创造各种各样的矢量图形，从简单的形状到复杂的图案。

SVG滤镜和动画

SVG不仅可以创建静态的矢量图形，还可以通过滤镜和动画来增加图形的视觉效果。

滤镜可以变换图形的颜色、模糊度和对比度等，动画可以改变图形的位置、大小和透明度等。

以下是一个简单的SVG滤镜和动画代码片段：

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" fill="blue">
    <animate attributeName="x" from="10" to="150" dur="1s" repeatCount="indefinite" />
    <animate attributeName="fill" values="blue;red;green" dur="3s" repeatCount="indefinite" />
    <animateMotion path="M 10 10 L 150 150" dur="5s" repeatCount="indefinite" />
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <animate attributeName="filter" values="none;url(#blur);none" dur="3s" repeatCount="indefinite" />
  </rect>
</svg>

这个代码片段创建了一个蓝色矩形，并添加了平移、颜色变化、运动和滤镜等动画效果。

总结

SVG元素是创建可缩放矢量图形的基础元素。除了基础的SVG元素属性，SVG还包含了许多不同的图形元素来创造复杂的矢量图形。通过滤镜和动画，SVG图形可以变得更加生动，增加它们的视觉效果。