正文

从零开始学SVG绘图：轻松入门教程，助你快速掌握矢量图形设计

/0 浏览量
0822

SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。它允许你创建高质量的矢量图形，这些图形可以任意缩放而不失真。SVG绘图在网页设计、动画制作、数据可视化等领域有着广泛的应用。本教程将从零开始，带你轻松入门SVG绘图。

SVG基础

1. SVG文档结构

一个SVG文档的基本结构如下：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <!-- 图形元素 -->
</svg>
  • xmlns：定义SVG命名空间。
  • width 和 height：定义SVG画布的宽度和高度。
  • viewBox：定义图形元素的显示区域。

2. SVG图形元素

SVG图形元素包括：

  • <line>：直线。
  • <rect>：矩形。
  • <circle>：圆形。
  • <ellipse>：椭圆。
  • <polygon>：多边形。
  • <polyline>：折线。
  • <path>：路径。

SVG绘图入门

1. 绘制矩形

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <rect x="10" y="10" width="180" height="180" fill="blue" />
</svg>

这段代码绘制了一个蓝色矩形，位置在画布的左上角，宽度和高度分别为180像素。

2. 绘制圆形

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

这段代码绘制了一个红色圆形，圆心位于画布中心，半径为50像素。

3. 绘制路径

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <path d="M10 10 H 190 V 190 H 10 Z" fill="green" />
</svg>

这段代码绘制了一个绿色正方形，边长为180像素。

SVG高级技巧

1. 动画

SVG支持多种动画效果，如<animate>、<animateTransform>等。以下是一个简单的动画示例：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" fill="blue">
    <animate
      attributeName="r"
      from="50"
      to="100"
      dur="2s"
      fill="freeze"
    />
  </circle>
</svg>

这段代码使圆形的半径在2秒内从50像素变为100像素。

2. 交互

SVG支持交互功能，如鼠标事件、键盘事件等。以下是一个简单的鼠标事件示例：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" fill="blue" />
  <circle cx="100" cy="100" r="10" fill="red" />
  <script>
    var circle = document.querySelector('circle');
    circle.addEventListener('mouseover', function() {
      this.style.fill = 'yellow';
    });
    circle.addEventListener('mouseout', function() {
      this.style.fill = 'red';
    });
  </script>
</svg>

这段代码使红色圆形在鼠标悬停时变为黄色，鼠标移出时恢复红色。

总结

通过本教程，你已初步掌握了SVG绘图的基本知识和技巧。SVG绘图具有丰富的功能和应用场景，希望你能继续深入学习，发挥SVG图形设计的潜力。

-- 展开阅读全文 --