技術類文章

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

不定更新、可能爛尾XD

學習資源: W3Schools、其他網路資料

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

SVG : 圓形

(僅列出部分有使用到的屬性)

  • <svg></svg>

    • height : 整個圖形(畫布)的原始長度
    • width: 整個圖形(畫布)的原始寬度

  • <circle></circle> 或 <circle />

    • cx : 圓心初始的 x 座標
    • cy : 圓心初始的 y 座標
    • r : 圓的半徑
    • sroke : 圖形外框顏色
    • stroke-width : 圖形外框寬度
    • fill : 圖形填滿顏色
    • fill-opacity : 調整圖形填滿顏色的透明度
    • stroke-opacity : 調整圖形外框顏色的透明度

範例1

1
2
3
4
<svg height="500" width="500">
    <circle cx="100" cy="100" r="50" fill="wheat" 
    stroke="black" stroke-width="5"></circle>
</svg>

範例2

1
2
3
4
5
<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 : 橢圓形

(僅列出部分有使用到的屬性)

  • <svg></svg>

    • height : 整個圖形(畫布)的原始長度
    • width: 整個圖形(畫布)的原始寬度

  • <ellipse></ellipse> 或 <ellipse />

    • cx : 圓心初始的 x 座標
    • cy : 圓心初始的 y 座標
    • rx : 圓的水平方向半徑
    • ry : 圓的垂直方向半徑
    • sroke : 圖形外框顏色
    • stroke-width : 圖形外框寬度
    • fill : 圖形填滿顏色
    • fill-opacity : 調整圖形填滿顏色的透明度
    • stroke-opacity : 調整圖形外框顏色的透明度

備註 : 橢圓跟圓形不同的地方在於需要明確設定垂直和水平方向的半徑長度。

範例1

1
2
3
4
<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

1
2
3
4
5
<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如果設定相同的數值會變成圓喔!

SVG : 線段

(僅列出部分有使用到的屬性)

  • <svg></svg>

    • height : 整個圖形(畫布)的原始長度
    • width: 整個圖形(畫布)的原始寬度

  • <line></line> 或 <line />

    • x1 : 線段起始點的 x 座標
    • y1 : 線段起始點的 y 座標
    • x2 : 線段終點的 x 座標
    • y2 : 線端終點的 y 座標
    • sroke : 線段顏色
    • stroke-width : 線段寬度
    • stroke-opacity : 線段的透明度

範例1

1
2
3
4
<svg height="500" width="500">
    <line x1="100" y1="50" x2="300" y2="150" 
    stroke-width="5" stroke="green"></line>
</svg>

範例2

1
2
3
4
<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相關屬性喔!

分享到