SVG基础 | 绘制SVG矩形

.svg-demo{ width: 100%; height: 150px;}

一个<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矩形的位置由x和y属性决定。请记住，这个位置是它最接近任何父元素的位置。

SVG矩形尺寸由width和height属性决定。

style属性允许您为矩形设置额外的样式，如描边色、描边宽度和填充色等。

下图为上述代码的返回结果：

圆角矩形

还可以画圆角SVG矩形。rx和ry该属性用于决定矩形圆角的大小。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>

上述代码的返回结果如下：

在上面的例子中，三个圆角矩形rx和ry值都是一样的。假如你单独设置了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教程目录

相关阅读：

• MDN rect