本节我们来学习 SVG 中的矩形。SVG 中设有一些预定义的形状元素,我们可以直接通过这些元素来绘制图形。
基本图形有如下几种:
元素 | 图形 |
---|---|
<rect> |
矩形 |
<circle> |
圆形 |
<ellipse> |
椭圆 |
<line> |
线 |
<polyline> |
折线 |
<polygon> |
多边形 |
<path> |
路径 |
直接在 <svg>
元素内使用上述图形元素,就可以轻松绘制出图形啦,本节我们先来讲如何使用 <rect>
元素绘制矩形。
绘制一个矩形
SVG 中的 <rect>
标签可用来创建矩形,通过这个元素中的属性可以设置矩形的宽高、填充颜色、轮廓、尖角、圆角等。
示例:
例如我们绘制一个最基本的矩形,例如我们创建一个300 * 100
的矩形,代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width=