SVG 繪製形狀

SVG viewport 可視視窗

繪製兩條長度均為360px的線段

超出可視範圍區域 線段依舊存在只是無法看見

<rect> 矩形

程式碼 

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
              <rect x="40" y="40" width="300" height="100" 
                  style="fill:rgb(248, 204, 61); stroke-width:3; stroke:rgb(0,0,0)" />
            </svg>

<circle> 圓形

程式碼 

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
              <circle cx="250" cy="100" r="60" 
                     stroke="black" stroke-width="3" fill="rgb(248, 117, 61)" />
            </svg>

<ellipse> 橢圓形

程式碼 

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
                <ellipse cx="250" cy="100" rx="150" ry="40" 
                         stroke="black" stroke-width="3" fill="rgb(248, 204, 61)">
                </ellipse>
            </svg>

<line> 線條

程式碼 

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
                <line x1="20" y1="80" x2="480" y2="150" style="stroke:rgb(248, 117, 61); stroke-width:6" />
            </svg>

<polyline> 折線

程式碼 

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
              <polyline points="20,50 40,25 60,40 160,120 420,140 460,180 "
                        style="fill: none; stroke: rgb(248, 204, 61); stroke-width: 6"/>
            </svg>

<polygon> 多邊形

程式碼 

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
                <polygon points="200,10 260,30 320,90 280,190 160,180 120,100"
                        style="fill: rgb(248, 117, 61); stroke: black; stroke-width: 3"/>
              </svg>