SVG 实例

SVG(Scalable Vector Graphics)是一种用于描述二维矢量图形的XML标记语言,它可以在网页上实现丰富的图形效果。本章节将介绍一些常见的SVG实例,帮助您快速了解SVG的基本用法。

1. 绘制一个简单的矩形

SVG中最简单的图形之一就是矩形。下面是一个绘制矩形的示例代码:

---- ----------- -------------
  ----- ------ ------ ---------- ----------- ---------- --
------

在这段代码中,我们使用<rect>元素来绘制一个矩形,xy属性表示矩形的左上角坐标,widthheight属性表示矩形的宽和高,fill属性表示矩形的填充颜色。

2. 绘制一个圆形

除了矩形,SVG还支持绘制圆形。下面是一个绘制圆形的示例代码:

---- ----------- -------------
  ------- ------- ------- ------ ----------- --
------

在这段代码中,我们使用<circle>元素来绘制一个圆形,cxcy属性表示圆心的坐标,r属性表示圆的半径,fill属性表示圆的填充颜色。

3. 绘制一条直线

除了基本的形状,SVG还支持绘制线条。下面是一个绘制直线的示例代码:

---- ----------- -------------
  ----- ------- ------- ------- ------- -------------- --
------

在这段代码中,我们使用<line>元素来绘制一条直线,x1y1属性表示起点坐标,x2y2属性表示终点坐标,stroke属性表示线条的颜色。

以上就是几个简单的SVG实例,希望能帮助您快速入门SVG的基本用法。在接下来的章节中,我们将深入探讨SVG的更多功能和应用场景。


上一篇:SVG 简介
下一篇:SVG 在 HTML 页面