[SVG] 矩形基本繪圖

svg 有以下幾種基本的繪圖標籤:
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>

要繪製的時候先要用 svg 的標籤,再依想繪製的形狀使用繪製的標籤。


其中 rect 是基本矩形標籤,可以設定寬高
style 內是 css 定義樣式,
fill 設定背景色
stroke-width 設定邊框粗細
stroke 設定邊框顏色

所以我們也可以改成用 css 控制屬性



此外我們還可以用設定形狀的位置還有透明度等


x, y 用來設定離左上角的位置,透明度分為 fill-opacity 跟 stroke-opacity,個別設定填色和邊框的透明度。


加上 rx 及 ry 可以設定矩形的圓角。

留言

熱門文章