SVG（可缩放矢量图形）是一种用于描述二维矢量图形的XML标记语言。它是一种开放的标准，可用于在Web中呈现图形，支持缩放而不失真。以下是一个简单的SVG教程，介绍了SVG的基本概念和用法。

1. SVG 基本结构

SVG文档由<svg>元素开始，定义了SVG画布的大小和其他属性。
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG 内容 -->
</svg>

  •  width 和 height 属性定义了SVG画布的宽度和高度。

  •  xmlns 属性指定SVG命名空间。


2. 基本形状

矩形 (<rect>)
<rect width="100" height="50" fill="blue" />

  •  width 和 height 定义了矩形的宽度和高度。

  •  fill 定义了填充颜色。


圆形 (<circle>)
<circle cx="50" cy="50" r="30" fill="green" />

  •  cx 和 cy 定义了圆心的坐标。

  •  r 定义了半径。


椭圆 (<ellipse>)
<ellipse cx="150" cy="80" rx="80" ry="50" fill="red" />

  •  cx 和 cy 定义了椭圆中心的坐标。

  •  rx 和 ry 定义了水平和垂直方向的半轴长度。


直线 (<line>)
<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

  •  x1, y1 和 x2, y2 定义了直线的起点和终点。

  •  stroke 定义了线的颜色。


折线 (<polyline>)
<polyline points="10,10 50,90 90,10" fill="none" stroke="purple" />

  •  points 定义了一系列点的坐标。

  •  fill 定义了填充颜色。

  •  stroke 定义了线的颜色。


多边形 (<polygon>)
<polygon points="10,10 50,90 90,10" fill="yellow" />

  •  points 定义了一系列点的坐标。

  •  fill 定义了填充颜色。


3. 文本 (<text>)
<text x="20" y="40" font-family="Arial" font-size="20" fill="brown">Hello, SVG!</text>

  •  x 和 y 定义了文本的起始位置。

  •  font-family 定义了字体。

  •  font-size 定义了字体大小。

  •  fill 定义了文本颜色。


4. 渐变 (<linearGradient> 和 <radialGradient>)

线性渐变 (<linearGradient>)
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>

<rect width="300" height="200" fill="url(#grad1)" />

径向渐变 (<radialGradient>)
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</radialGradient>

<circle cx="150" cy="100" r="80" fill="url(#grad2)" />

5. 路径 (<path>)
<path d="M10 80 Q 95 10 180 80" fill="none" stroke="black" />

  •  d 属性定义了路径的命令序列。

  •  fill 定义了填充颜色。

  •  stroke 定义了线的颜色。


6. 使用外部CSS样式
<style>
  .blue-rect {
    fill: blue;
    stroke: black;
  }
</style>

<rect x="10" y="10" width="100" height="50" class="blue-rect" />

7. 链接和嵌入其他SVG文件
<a xlink:href="https://example.com">
  <text x="20" y="40" font-family="Arial" font-size="20" fill="blue">Click me!</text>
</a>

<image x="50" y="80" width="100" height="50" xlink:href="image.svg" />

这是一个简单的SVG教程，涵盖了基本形状、文本、渐变、路径等常见元素的用法。SVG提供了丰富的功能，允许你创建各种各样的矢量图形。深入了解SVG规范和属性将帮助你更好地利用SVG进行图形设计和动画。


转载请注明出处：http://www.pingtaimeng.com/article/detail/14664/SVG