SVG 在 HTML 页面

SVG(Scalable Vector Graphics)是一种用于描述二维矢量图形的XML标记语言。在 HTML 页面中,可以通过使用<svg>标签将 SVG 图形嵌入到页面中。在本章节中,我们将讨论如何在 HTML 页面中使用 SVG。

嵌入 SVG

要在 HTML 页面中嵌入 SVG,可以使用<svg>标签。以下是一个简单的示例:

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

在上面的示例中,我们创建了一个宽高为100的 SVG 元素,并在其中绘制了一个红色的圆形。

SVG 属性

SVG 元素可以设置多种属性来控制其外观和行为。以下是一些常用的 SVG 属性:

  • width:指定 SVG 元素的宽度
  • height:指定 SVG 元素的高度
  • viewBox:指定 SVG 元素的视口框,用于定义用户坐标系统
  • fill:指定填充颜色
  • stroke:指定描边颜色
  • stroke-width:指定描边宽度

SVG 图形

SVG 支持多种图形元素,例如<circle><rect><line><polyline>等。以下是一个绘制矩形的示例:

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

在上面的示例中,我们使用<rect>元素绘制了一个蓝色的矩形。

以上就是在 HTML 页面中使用 SVG 的基础知识,接下来我们将深入探讨 SVG 的更多特性和用法。


上一篇:SVG 实例
下一篇:SVG 矩形