這篇筆記使用到的圖形屬性,基本上都跟矩形那篇差不多。
SVG : 圓形
(僅列出部分有使用到的屬性)
範例1
<svg height="500" width="500">
<circle cx="100" cy="100" r="50" fill="wheat"
stroke="black" stroke-width="5"></circle>
</svg>
範例2
<svg height="500" width="500">
<circle cx="100" cy="100" r="50" fill="wheat"
stroke="black" stroke-width="5" fill-opacity="0.5"
stroke-opacity="0.5"></circle>
</svg>
SVG : 橢圓形
(僅列出部分有使用到的屬性)
範例1
<svg height="500" width="500">
<ellipse cx="150" cy="100" rx="100" ry="50" fill="rgb(255, 183, 197)"
stroke="green" stroke-width="5"></ellipse>
</svg>
範例2
<svg height="500" width="500">
<ellipse cx="150" cy="100" rx="100" ry="50" fill="rgb(255, 183, 197)"
stroke="green" stroke-width="5" fill-opacity="0.5"
stroke-opacity="0.5"></ellipse>
</svg>
備註 : 橢圓的rx、ry如果設定相同的數值會變成圓喔!
(僅列出部分有使用到的屬性)
範例1
<svg height="500" width="500">
<line x1="100" y1="50" x2="300" y2="150"
stroke-width="5" stroke="green"></line>
</svg>
範例2
<svg height="500" width="500">
<line x1="100" y1="50" x2="300" y2="150"
stroke-width="5" stroke="black" stroke-opacity="0.5"></line>
</svg>
備註 : 2個點無法構成一個封閉的區域,所以線段就不會有先前圖形都有的fill相關屬性喔!