SVG矩形

SVG形状

SVG里预定义里一些形状，程序员可以使用这些元素来绘制图形：

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 直线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

后面的章节将会一一介绍这些元素，现在我们从矩形开始。

SVG画矩形 – <rect>

例 1

<rect>用来绘制一个矩形，以及类似图形，比如长方形，正方形等。

上面的这个SVG图片的代码是：

<svg width="400" height="110">
 
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

代码说明：

• <rect>元素里的width和width属性定义了矩形的高度和宽度
• style属性定义了这个矩形的CSS属性。
• style属性里的fill属性定义了这个矩形填充的颜色
• style属性里的stroke-width属性定义了矩形边线的宽度
• style属性里的stroke属性定义了矩形的边线的颜色

例 2

这个例子里我们将会看到一些新属性：

上面的图像使用了下面的SVG代码：

<svg width="400" height="180">
 
<rect x="50" y="20" width="150" height="150"
 
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" 
	/>
</svg>

代码说明：

• x属性定义矩形距离左边的距离，比如，x="50"相对于CSS里的margin-left: 50px
• y属性定义了矩形距离上边的距离，比如y="20"相当于CSS里的margin-top: 20px
• CSS fill-opacity属性定义了填充颜色的透明度，值范围为 0 到 1
• CSS stroke-opacity属性定义了边线颜色的透明度，值范围为 0 到 1

例 3

定义整个图像元素的透明度：

上面的图像使用了下面的SVG代码：

<svg width="400" height="180">
 
<rect x="50" y="20" width="150" height="150"
 
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

代码说明：

• CSS opacity属性定义了整个图形元素的透明度

例 4

最后一个例子，创建一个具有圆角效果的SVG矩形图形：

上面的SVG图形使用了下面的SVG代码：

<svg width="400" height="180">
 
<rect x="50" y="20" rx="20" ry="20" width="150"
height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

代码说明：

• rx和ry定义了矩形四个角的圆角效果