可縮放矢量圖形-SVG

介紹

SVG是可縮放的矢量圖形,相比位圖,他無論如何縮放都不會造成失真,因為它是動态計算的,html中支援svg标簽,svg也提供了若幹的基礎圖形接口

矩形

繪制一個矩形使用标簽,可以設定的屬性有:x,y,width,height,fill,還可以通過style屬性來設定css的一些樣式,使用rx,ry還可以繪制圓角效果,如:

<svg >
    <rect x="0" y="0" width="100" height="100"
    fill="red" rx="10" ry="10"
    stroke="pink" stroke-width="5" id="rect">
    </rect>
</svg>
           

圓

繪制圓可以使用标簽,形狀定義主要使用這幾個屬性:cx,cy,r,也可以使用屬性定義各種樣式

如:

<svg width="500" height="500">
	<circle cx="250" cy="250" r="200" fill="pink" stroke="pink" stroke-width="5">
	</circle>
</svg>
           

橢圓

橢圓的繪制使用标簽,橢圓與圓不同,橢圓有長半軸和短半軸之分,是以形狀的定義有四個屬性cx,cy,rx,ry分别表示x坐标,y坐标和兩個半軸.

如:

<svg width="500" height="500">
    <ellipse cx="250" cy="250" rx="120" ry="75" fill="pink" stroke="pink" stroke-width="5">
    </ellipse>
</svg>
           

線條

線條使用标簽來定義,這個線條是直線,是以定義形狀的有四個屬性x1,y1,x2,y2,分别表示直線兩端的位置

如:

<svg width="500" height="500">
		<line x1="200" y1="250" x2="300" y2="250" fill="pink" stroke="pink" stroke-width="5">
		</line>
	</svg>
           

多邊形

多邊形使用标簽來定義,一個多邊形使用的角的位置來定義形狀,使用points屬性來定義角的位置

如:

<svg width="500" height="500">
		<polygon points="250,10 200,200 300,200" fill="pink" stroke="pink" stroke-width="5">
		</polygon>
	</svg>
           

折線

折線與多邊形相似,也使用points屬性來控制折線的轉折點

如:

<svg width="500" height="500">
		<polyline points="250,10 200,200 300,200" fill="pink" stroke="pink" stroke-width="1">

		</polygon>
	</svg>
           

??正文結束??