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 的更多特性和用法。