当前位置主页 > 资料库 > 前端教程 > SVG基础 | 绘制SVG矩形

SVG基础 | 绘制SVG矩形

06-03

一个<rect>元素代表一个SVG矩形。通过这个元素你可以画出不同宽度,不同高度,以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。

一个SVG矩形的简单例子

下面是一个绘制SVG矩形的简单例子。

<svg xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" height="100" width="100"
        style="stroke:#006600; fill: #00cc00"/>

</svg>                      
                            

SVG矩形的位置由xy属性决定。请记住,这个位置是相对于任何它最接近的父元素的位置。

SVG矩形的尺寸由widthheight属性决定。

style属性允许你为矩形设置附加的样式,如描边色,描边宽度和填充色等。

下面的图形是上面代码的返回结果:

圆角矩形

我们也可以绘制圆角的SVG矩形。rxry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度,ry属性则决定圆角的高度。下面的例子中,三个矩形的圆角分别被设置为5像素、10像素和15像素,请注意观察他们各自圆角的大小变化。

<svg xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" height="50" width="50"
          rx="5" ry="5"
          style="stroke:#006600; fill: #00cc00"/>
    <rect x="70" y="10" height="50" width="50"
          rx="10" ry="10"
          style="stroke:#006600; fill: #00cc00"/>
    <rect x="130" y="10" height="50" width="50"
          rx="15" ry="15"
          style="stroke:#006600; fill: #00cc00"/>
</svg>                                   
                            

上面的代码的返回结果如下:

上面的例子中,三个圆角矩形的rxry值都是相同的。如果你单独设置了rx的值,那么ry的值和rx相同。这是定义SVG圆角矩形的简写方式。

下面的两个例子中,rx的值都设置为10像素,但是ry的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。

<svg xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" height="50" width="50"
          rx="10" ry="5"
          style="stroke:#006600; fill: #00cc00"/>
    <rect x="130" y="10" height="50" width="50"
          rx="10" ry="15"
          style="stroke:#006600; fill: #00cc00"/>
</svg>                                
                            

上面的代码的返回结果如下:

描边矩形

你可以使用stroke属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色,边框的宽度为3像素。

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             stroke-width: 3;
             fill: none;
      "
      />                               
                            

上面的代码的返回结果如下:

你还可以使用stroke-dasharray属性将矩形的边框设置为虚线。看下面的例子:

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             stroke-width: 3;
             stroke-dasharray: 10 5;
             fill: none;
            "
        />                                 
                            

上面的代码的返回结果如下:

填充矩形

你可以使用fill属性来为SVG矩形填充颜色。例如将矩形的颜色填充为none

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             fill: none;
            "
        />                                
                            

这时,SVG矩形的填充色将和浏览器的页面颜色一样。

你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             fill: #33ff33;
            "
        />                                
                            

最后,你可以用fill-opacity属性来设置填充矩形的透明度。下面的例子中,两个句子部分叠加在一起,上面的矩形设置为50%的填充透明度。

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
         fill: #33ff33;
        "
        />
<rect x="50" y="50" width="100" height="100"
      style="stroke: #000099;
         fill: #3333ff;
         fill-opacity: 0.5;
        "
        />                                
                            

上面的代码的返回结果如下:

返回SVG教程目录

相关阅读:

Previous:
上一篇:30个值得收藏的CSS代码片段
Next:
下一篇:SVG基础 | 绘制SVG圆形和椭圆形
返回顶部