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。是否可動畫：是。
圓角規則：
- rx和ry必須是一個長度值。
- 如果沒有對rx和ry給出定義，那么它們都會被設為0。 (這樣他們會是一個尖角的矩形)
- 如果只對rx進行了賦值，那么ry會自動被設置為與rx相等的值。
- 如果只對ry進行了賦值，那么rx會自動被設置為與ry相等的值。
- 如果rx的值大于自身寬度的一半，那么它會被設置為自身寬度一半。
- 如果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>
?
考研難嗎)
實現元素json對象的排序)
