SVG 基礎圖形

白牙青森發表於2014-12-17
SVG

SVG 基礎圖形

SVG包含了以下的基礎圖形元素：

  • 矩形（包括可選的圓角），使用<rect>元素建立
  • 圓形，使用<circle>元素建立
  • 橢圓形，使用<ellipse>元素建立
  • 直線，使用<line>元素建立
  • 折線，使用<polyline>元素建立
  • 多邊形，使用<polygon>元素建立

理論上，這些基礎圖形元素都能用<path>元素來構建的相同的圖形。並且所有可用於<path>元素的屬性都可以應用在這些基礎圖形上。

rect 元素

<rect>元素定義了一個與當前使用者座標系軸對齊的矩形。而圓角的矩形可以通過設定元素的 rx 和 ry屬性來實現。

屬性定義：

  • x = <座標點>，矩形左上角在當前使用者座標系中的x軸座標，預設值為0。是否可動畫：是。
  • y = <座標點>，矩形左上角在當前使用者座標系中的y軸座標，預設值為0。是否可動畫：是。
  • width = <長度>，矩形寬度，預設值為0。是否可動畫：是。
  • height = <長度>，矩形高度，預設值為0。是否可動畫：是。
  • rx = <長度>，矩形X軸的圓角半徑，預設值為0。是否可動畫：是。
  • ry = <長度>，矩形y軸的圓角半徑，預設值為0。是否可動畫：是。

圓角規則：

  1. rx和ry必須是一個長度值。
  2. 如果沒有對rx和ry給出定義，那麼它們都會被設為0。 (這樣他們會是一個尖角的矩形)
  3. 如果只對rx進行了賦值，那麼ry會自動被設定為與rx相等的值。
  4. 如果只對ry進行了賦值，那麼rx會自動被設定為與ry相等的值。
  5. 如果rx的值大於自身寬度的一半，那麼它會被設定為自身寬度一半。
  6. 如果ry的值大於自身高度的一半，那麼它會被設定為自身高度一半。

DEMO：

1 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
2     <rect x="50" y="50" width="200" height="100" fill="#cd5c5c"></rect>
3 </svg>
4 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
5     <rect x="50" y="50" rx="15" ry="15" width="200" height="100" fill="#cd5c5c"></rect>
6 </svg>

 

circle 元素

<circle>元素定義了一個圓形。

屬性定義：

  • cx = <座標點>，圓心在當前使用者座標系中的x軸座標，預設值為0。是否可動畫：是。
  • cy = <座標點>，圓心在當前使用者座標系中的y軸座標，預設值為0。是否可動畫：是。
  • r = <長度>，圓的半徑。是否可動畫：是。

DEMO:

1 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
2     <circle cx="150" cy="100" r="70" fill="#cd5c5c"></circle>
3 </svg>

 

ellipse 元素

<ellipse>元素定義了一個橢圓。

屬性定義：

  • cx = <座標點>，圓心在當前使用者座標系中的x軸座標，預設值為0。是否可動畫：是。
  • cy = <座標點>，圓心在當前使用者座標系中的y軸座標，預設值為0。是否可動畫：是。
  • rx = <長度>，圓的x軸半徑。是否可動畫：是。
  • ry = <長度>，圓的y軸半徑。是否可動畫：是。

DEMO：

 

line 元素

<line>元素定義了一個處於兩點之間的直線。

屬性定義：

  • x1 = <座標點>，起點在當前使用者座標系中的x軸座標，預設值為0。是否可動畫：是。
  • y1 = <座標點>，起點在當前使用者座標系中的y軸座標，預設值為0。是否可動畫：是。
  • x2 = <座標點>，終點在當前使用者座標系中的x軸座標，預設值為0。是否可動畫：是。
  • y2 = <座標點>，終點在當前使用者座標系中的x軸座標，預設值為0。是否可動畫：是。

因為line元素在幾何關係上是一個一維的圖形，所以它沒有內部的這個概念，也無法在該元素上使用fill屬性。

DEMO：

1 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
2     <line x1="50" y1="50" x2="250" y2="150" stroke-width="5" stroke="#cd5c5c" />
3 </svg>

 

polyline 元素

<polyline>元素定義了一個由多條相連的直線段而成的非閉合圖形。

屬性定義：

  • points = <多組的座標點>，由points屬性中的座標點相連而成的圖形。

DEMO：

1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
2     <polyline fill="none" stroke="#cd5c5c" stroke-width="5" points="50,50 260,50 260,150 50,150" />
3 </svg>

 

polygon 元素

<polygon>元素定義了一個由多條相連的直線段而成的閉合圖形。

屬性定義：

  • points = <多組的座標點>，與<polyline>元素相同，也是由points屬性中的座標點相連而成的圖形，但起始點也會相連。

DEMO：

1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
2     <polygon fill="none" stroke="#cd5c5c" stroke-width="5" points="50,50 260,50 260,150 50,150" />
3 </svg>

 

相關文章