前往
大廳
主題

SVG 自學微筆記(03) - 繪製圓形、橢圓形 & 線段

冰抹茶拿鐵 | 2023-02-28 18:00:22 | 巴幣 0 | 人氣 106

這篇筆記使用到的圖形屬性,基本上都跟矩形那篇差不多。

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>

備註 : 橢圓的rxry如果設定相同的數值會變成圓喔!

SVG : 線段
(僅列出部分有使用到的屬性)
範例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相關屬性喔!

創作回應

更多創作