[翻譯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;
        "
        />

效果以下