SVG基本圖形元素
阿新 • • 發佈：2017-06-04
n) height 坐標 form 定義 nsf yellow idt for
svg中預定義了7中形狀元素，分別是矩形(rect)、圓形(circle)、橢圓(ellipse)、
線段(line)、折線(polyline)、多邊形(polygon)、路徑(path)。
1.矩形
1 <svg width="500" height="300" version="1.1"> //定義svg畫布的寬度和高度 2 <rect x="20" y="20" width="200" height="100" style="fill:steelblue;stroke:blue;stroke-width:4;opactity:0.5"/> 3 </svg> 4 x:矩形左上角的x坐標5 y:矩形左上角的y坐標 6 width:矩形的寬度 7 height:矩形的高度
圖形如下所示
2.圓角矩形
1 <svg width="500" height="300" version="1.1"> 2 <rect x="20" y="20" rx="30" ry="50" width="200" height="100" style="fill:red;stroke:black;stroke-width:3;opacity: 0.5;"> 3 </svg> 4 x:矩形左上角的x坐標 5 y:矩形左上角的y坐標 6 width:矩形的寬度 7 height:矩形的高度8 rx:對於圓角矩形,圓角對應的橢圓在x方向上的半徑 9 ry:對於圓角矩形,圓角對應的橢圓在y方向上的半徑
圖形如下所示
3.圓形
1 <svg width="500" height="300" version="1.1"> 2 <circle cx="150" cy="150" r="80" style="fill:yellow;stroke:black;stroke-width:2"/> 3 </svg> 4 cx:圓心的x坐標 5 cy:圓心的y坐標 6 r:圓的半徑
圖形如下：
4.橢圓
1 <svg width="500" height="300" version="1.1"> 2 <ellipse cx="250" cy="150" rx="200" ry="100" style="fill:green;stroke:blue;stroke-width:1"/> 3 </svg> 4 cx:橢圓圓心的x坐標 5 cy:橢圓圓心的y坐標 6 rx:橢圓的x軸半徑 7 ry:橢圓的y軸半徑
圖形如下所示：
5.線段
1 <svg width="500" height="300" version="1.1"> 2 <line x1="20" y1="10" x2="200" y2="230" style="stroke:red;stroke-width:3"/> 3 </svg> 4 x1:起點的x坐標 5 y1:起點的y坐標 6 x2:終點的x坐標 7 y2:重點的y坐標
圖形如下所示
6.多邊形
1 <svg width="500" height="300" version="1.1"> 2 <polygon points="100,30, 20,80 60,160 140,160 180,90" style="fill:LawnGreen;stroke:black;stroke-width:1" /> 3 </svg> 4 points:多邊形各個點的坐標
圖形如下：
7.折線
1 <svg width="500" height="300" version="1.1"> 2 <polyline points="100,30, 20,80 60,160 140,160 180,90" style="fill:white;stroke:black;stroke-width:1" transform="translate(200,0)" /> 3 </svg> 4 points:折線各個點坐標
圖形如下:
8.路徑
直線類
1 <svg width="500" height="300" version="1.1"> 2 <path d="M30,50 L200,200" style="stroke:black;stroke-width:1"/> 3 <path d="M30,50 H200" style="stroke:red;stroke-width:1"/> 4 <path d="M30,50 V200" style="stroke:blue;stroke-width:1"/> 5 </svg> 6 M:起點坐標 7 L:畫直線到指定坐標 8 H:畫水平直線到指定坐標,省略了y軸坐標 9 V:畫垂直直線到指定坐標,省略了x軸坐標
圖形如下
曲線類
1 <svg width="500" height="300" version="1.1"> 2 <path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" style="fill:white;stroke:red;stroke-width:2"/> 3 </svg> 4 C:三次貝賽爾曲線經兩個指定控制點和到達終點坐標 5 S:與前一條貝塞爾曲線相連,第一個控制點為前一條曲線第二個控制點的對稱點,只需要第二個控制點和終點
圖形如下
弧線類
1 <svg width="500" height="300" version="1.1"> 2 <path d="M100,200 A50,30 0 1,0 150,-150 " style="fill:red;stroke:blue;stroke-width:1"/> 3 </svg> 4 A(rx,ry,x-axis-ratation,large-arc-flag,sweep-flag,x,y) 5 rx:橢圓x方向的半軸大小 6 ry:橢圓y方向的半軸大小 7 x-axis-ratation:橢圓的x軸與水平軸順時針方向夾角 8 large-arc-flag:兩個值(1:大角度弧線 0:小角度弧線) 9 sweep-flag:兩個值(1:順時針至終點 0:逆時針至終點) 10 x:終點x坐標 11 y:終點y坐標
圖形如下：
SVG基本圖形元素