[翻譯svg教程]svg中矩形元素 rect

svg 元素<rect> 是一個矩形元素，用這個元素，可以你可以繪制矩形，設置矩形寬高，邊框的寬度顏色，矩形的填充顏色，是否用圓角等

rect 示例

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

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

</svg>

這個矩形的

                   位置：用x和y屬性定義，需要注意的是這個位置是相對於 這個矩形的父節點定義的

                   寬高：用height和width 屬性定義

                   樣式：在style屬性里面可以定義各種影響矩形的樣式例如邊框的顏色、寬度、填充的顏色等

這個例子在網頁上的效果

圓角效果

 

矩形的圓角的效果，使用rx，ry定義的，rx定義圓角的寬 ry定義圓角的高

例如

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

    <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 ry的缺省值就是rx，這可以作為一種簡便的寫法

矩形的邊框

 

例如

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

你可以定義一個矩形的邊框 通過 style 中 stroke 屬性

stroke 定義顏色，stroke-width 定義寬度

效果如下

還可以定義邊框是實線還是虛線，默認是實線

   樣式中 stroke-dasharray 屬性可以定義邊框的類型 例如

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

效果如下

矩形的填充

ou can fill a rectangle using the SVG fill style properties. For instance, you can choose not to fill rect element by setting the fill style property to none. Here is an example of that:

通過svg的 樣式屬性，你可以填充矩形，設置fill屬性，如果將fill屬性設置為none，矩形內部就什么也不填充了。

例如

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

效果如下

填充點顏色 看看

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

效果如下

還可以指定填充的透明 設置 fill-opacity 屬性就可以了

例如

<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;
        "
        />

效果如下