SVG 实例：深入理解可缩放矢量图形的应用

本文链接：https://blog.youkuaiyun.com/csbysj2020/article/details/143583907

SVG 实例：深入理解可缩放矢量图形的应用

可缩放矢量图形（SVG，Scalable Vector Graphics）是一种基于XML的图像格式，用于在网页上创建二维图形。由于其矢量特性，SVG图像可以无限放大而不失真，这使得它们在网页设计和开发中非常受欢迎。本文将通过一系列实例，深入探讨SVG的应用，包括基本形状的创建、样式设置、动画制作以及交互性实现。

SVG基本形状

SVG支持多种基本形状，如矩形、圆形、椭圆、线段、折线、多边形等。这些基本形状可以通过简单的XML标签来创建。例如，创建一个矩形可以使用<rect>标签，而创建一个圆形则可以使用<circle>标签。

矩形实例

<svg width="100" height="100">
  <rect x="10" y="10" width="30" height="30" style="fill:blue; stroke:black; stroke-width:2"/>
</svg>

圆形实例

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

SVG样式设置

SVG允许开发者通过CSS样式或内联样式来设置图形的外观。可以设置的颜色、填充、描边、透明度等属性。

内联样式实例

<svg width="100" height="100">
  <rect x="10" y="10" width="30" height="30" style="fill:blue; stroke:black; stroke-width:2"/>
</svg>

CSS样式实例

<svg width="100" height="100">
  <style>
    .rect-style {
      fill: blue;
      stroke: black;
      stroke-width: 2;
    }
  </style>
  <rect x="10" y="10" width="30" height="30" class="rect-style"/>
</svg>

SVG动画制作

SVG动画可以通过多种方式实现，包括SMIL（Synchronized Multimedia Integration Language）、CSS动画和JavaScript。SMIL是一种XML语言，可以直接在SVG内部使用，用于创建复杂的动画效果。

SMIL动画实例

<svg width="100" height="100">
  <rect x="10" y="10" width="30" height="30" style="fill:blue;">
    <animate attributeName="width" from="30" to="100" dur="2s" repeatCount="indefinite"/>
  </rect>
</svg>

SVG交互性实现

SVG支持DOM（文档对象模型）操作，这意味着可以使用JavaScript来添加交互性。例如，可以响应用户的点击事件来改变图形的颜色或大小。

JavaScript交互实例

<svg width="100" height="100">
  <rect id="myRect" x="10" y="10" width="30" height="30" style="fill:blue;">
  </rect>
  <script>
    document.getElementById('myRect').addEventListener('click', function() {
      this.style.fill = 'red';
    });
  </script>
</svg>