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>
试一试» Code explanation:
- 的宽度和高度属性<rect>元件限定的高度和矩形的宽度
- 该style属性，用于为矩形定义的CSS属性
- 该CSS填充属性定义矩形的填充颜色
- CSS的笔划宽度属性定义矩形边框的宽度
- CSS的行程属性定义矩形边框的颜色
例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>
试一试» Code explanation:
- 该x属性定义矩形的左侧位置（例如：X =“50”从左边距放置的矩形50像素）
- 该y属性定义矩形的顶部位置（如Y =“20”从上边距放置的矩形20像素）
- CSS的填充不透明度属性定义填充颜色的透明度(legal range: 0 to 1)
- CSS的行程不透明属性定义笔触颜色的透明度(legal range: 0 to 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>
试一试» Code explanation:
- 该CSS opacity属性定义整个元素的不透明度值(legal range: 0 to 1)
例4
最后一个例子，创建一个圆角矩形：
下面是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>
试一试» Code explanation:
- 在RX和ry属性舍入矩形的角