正文

SVG绘图入门教程，轻松学会制作矢量图

/0 浏览量
0804

SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。它具有矢量图的所有优点，如可无限放大而不失真、易于编辑等。本文将为您介绍SVG绘图的基础知识，帮助您轻松学会制作矢量图。

1. SVG绘图基础

1.1 SVG文档结构

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

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

1.2 SVG图形元素

SVG包含多种图形元素，如矩形、圆形、椭圆、多边形、线条、路径等。以下是一些常用的图形元素：

  • <rect>：矩形
  • <circle>：圆形
  • <ellipse>：椭圆
  • <polygon>：多边形
  • <line>：线条
  • <path>：路径

2. SVG绘图实例

2.1 绘制矩形

以下是一个绘制矩形的示例：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="100"
  height="100"
  viewBox="0 0 100 100"
>
  <rect
    x="10"
    y="10"
    width="80"
    height="80"
    style="fill:blue;stroke-width:2;stroke:yellow;"
  />
</svg>

这个例子中，我们绘制了一个蓝色填充、黄色边框的矩形。

2.2 绘制圆形

以下是一个绘制圆形的示例：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="100"
  height="100"
  viewBox="0 0 100 100"
>
  <circle
    cx="50"
    cy="50"
    r="40"
    style="fill:red;stroke-width:2;stroke:blue;"
  />
</svg>

这个例子中，我们绘制了一个红色填充、蓝色边框的圆形。

2.3 绘制线条

以下是一个绘制线条的示例：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="100"
  height="100"
  viewBox="0 0 100 100"
>
  <line
    x1="10"
    y1="10"
    x2="90"
    y2="90"
    style="stroke:rgb(255,0,0);stroke-width:2;"
  />
</svg>

这个例子中，我们绘制了一条从左上角到右下角的红色线条。

3. SVG高级特性

3.1 变换

SVG支持多种变换，如平移、缩放、旋转、倾斜等。以下是一个平移变换的示例：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="100"
  height="100"
  viewBox="0 0 100 100"
>
  <rect
    x="10"
    y="10"
    width="80"
    height="80"
    style="fill:blue;stroke-width:2;stroke:yellow;"
    transform="translate(50,50)"
  />
</svg>

这个例子中，我们将矩形平移了50个单位。

3.2 动画

SVG支持多种动画效果，如渐变、移动、放大等。以下是一个移动动画的示例：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="100"
  height="100"
  viewBox="0 0 100 100"
>
  <circle
    cx="50"
    cy="50"
    r="40"
    style="fill:red;stroke-width:2;stroke:blue;"
    transform="translate(0,0)"
    id="myCircle"
  />
  <animate
    attributeName="transform"
    attributeType="XML"
    type="translate"
    from="0 0"
    to="100 100"
    dur="2s"
    repeatCount="indefinite"
  />
</svg>

这个例子中，我们将圆形从原点移动到(100,100)的位置。

4. 总结

通过本文的学习，您应该已经掌握了SVG绘图的基本知识和一些高级特性。希望您能够将所学知识应用到实际项目中，制作出精美的矢量图形。

-- 展开阅读全文 --