HTML5学习(3) SVG的学习及应用一 矩形及圆

<!--各项属性包括:宽度,高度,版本,命名空间-->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<!--圆心的X,Y坐标,半径,边线颜色,边线宽度,填充色-->
<circle cx="50" cy="150" r="40" stroke="black" stroke-width="2" fill="red"/>

<!--矩形属性:宽度,高度,样式:(填充色,边线宽度,边线颜色) -->
<rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
<!--X,Y坐标,宽度,高度,样式:(填充色,边线颜色,边宽,填充色透明度(0-1),边线颜色透明度)-->
<rect x="0" y="200" width="150" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
<!--整个元素的透明度opacity属性,取值范围0-1 (0为全透明)-->
<rect x="0" y="350" width="250" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.9"/>
<!-- 带圆角的矩形  rx,ry属性-->
<rect x="300" y="350" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>


</svg>

心得:

              矩形的属性有:width,heigth,x,y,style,rx,ry

              矩形的样式有:fill,stroke,stroke-width,fill-opacity,stroke-opacity,opacity

              圆的属性有:cx,cy,r,stroke,stroke-width,fill ,opacity