SVG基本使用一

1.什麼是SVG

SVG是XML語言的一種形式,有點相似XHTML,它能夠用來繪製矢量圖形。一個簡單的SVG文檔由<svg>根元素和基本的形狀元素構成。另外還有一個g元素,它用來把若干個基本形狀編成一個組。 在學習SVG以前要注意一下兩點:html

  • SVG的元素和屬性必須按標準格式書寫,由於XML是區分大小寫的(這一點和html不一樣)
  • SVG裏的屬性值必須用引號引發來,就算是數值也必須這樣作。

2.基本屬性填充和邊框

1.填充
  1. file :設置對象內部的顏色;
  2. fill-opacity :控制填充色的不透明度;
2.邊框
  1. stroke :設置繪製對象的線條的顏色;svg

  2. stroke-opacity :控制描邊的不透明度;wordpress

  3. stroke-width :定義了描邊的寬度,描邊是以路徑爲中心線繪製的;學習

  4. stroke-linecap :控制邊框終點的形狀;動畫

    stroke-linecap屬性的值有三種可能值:spa

    • butt 用直邊結束線段,它是常規作法,線段邊界90度垂直於描邊的方向、貫穿它的終點;code

    • square 的效果差很少,可是會稍微超出實際路徑的範圍,超出的大小由stroke-width控制;xml

    • round表示邊框的終點是圓角,圓角的半徑也是由stroke-width控制的。htm

      <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
           <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
            <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
      </svg>

    注:實際上中間是沒有粉色的線的,在此是爲了更好的顯示不一樣的效果。對象

  5. stroke-linejoin:制兩條描邊線段之間,用什麼方式鏈接,有三種可能值;

    • miter 默認值,表示用方形畫筆在鏈接處造成尖角;

    • round 表示用圓角鏈接,實現平滑效果;

    • bevel 鏈接處會造成一個斜接;

      <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
        stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
      
        <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
        stroke-linecap="round" fill="none" stroke-linejoin="round"/>
      
        <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
        stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
      </svg>

  6. stroke-dasharra:將虛線類型應用在描邊上;

    stroke-dasharray屬性的參數,是一組用逗號分割的數字組成的數列。和path不同,這裏的數字必須用逗號分割(空格會被忽略)。每一組數字,第一個用來表示填色區域的長度,第二個用來表示非填色區域的長度。

    <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd">
           <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,2" fill="none" />
           <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none" />
    </svg>

  7. fill-rule :定義如何給圖形重疊的區域上色,有兩種填充規則,更詳細的說明能夠看這裏搞懂SVG/Canvas中nonzero和evenodd填充規則

    • nonzero 非零填充

    • evenodd 奇偶填充

      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd">
      <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90" />
      </svg>
      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd">
       <polygon fill-rule="evenodd" stroke="red" points="50,0 21,90 98,35 2,35 79,90" />
      </svg>

  8. stroke-miterlimit :定義什麼狀況下繪製或不繪製邊框鏈接的miter效果;

  9. stroke-dashoffset :定義虛線開始的位置。

3.SVG的基本形狀

1. 矩形(rect)

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

  • x:矩形左上角的x位置
  • y:矩形左上角的y位置
  • width:矩形寬度
  • height:矩形高度
  • rx:圓角的x方位的半徑
  • ry:圓角的y方位的半徑

2. 圓形(circle)

<circle cx="25" cy="75" r="20"/>
  • r:圓的半徑
  • cx cy :圓心的座標(x,y)

3. 橢圓(ellipse)

<ellipse cx="75" cy="75" rx="20" ry="5"/>
  • cx:橢圓的x半徑
  • cy:橢圓的y半徑
  • cx cy :圓心的座標(x,y)

4. 線條(line)

<line x1="10" x2="50" y1="110" y2="150"/>
  • x1 y1 :直線起始點座標(x,y)
  • x2 y2 :直線終點座標(x,y)

5. 折線(polyline)

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
  • points :點集數列。每一個數字用空白、逗號、終止命令符或者換行符分隔開。每一個點必須包含2個數字,一個是x座標,一個是y座標。因此點列表 (0,0), (1,1) 和(2,2)能夠寫成這樣:「0 0, 1 1, 2 2」。

6. 多邊形(polygon)

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
  • points :點集數列。每一個數字用空白符、逗號、終止命令或者換行符分隔開。每一個點必須包含2個數字,一個是x座標,一個是y座標。因此點列表 (0,0), (1,1) 和(2,2)能夠寫成這樣:「0 0, 1 1, 2 2」。路徑繪製完後閉合圖形,因此最終的直線將從位置(2,2)鏈接到位置(0,0)。

7. 路徑(path)

(1)直線命令
  • M命令 (move to)

    須要兩個參數分別是須要移動到點的x軸和y軸,使用M命令移動畫筆後,只會移動畫筆不畫線,因此畫線還須要另外三個命令L、H、V

    M x y (or d dx dy)

  • L命令 (line to)

    須要兩個參數,分別是一個點的x軸和y軸座標,L命令將會在當前位置和新位置(L前面畫筆所在的點)之間畫一條線段

    L x y (or l dx dy)

    <path d="M10 10 L 90 20 " fill="#f00" stroke="black"/>

  • H命令(水平繪線)

    標明x軸移動到的位置,只在一個軸的方向上移動

    H x (or h dx)

    <path d="M10 10 H60 L 90 90 " fill="#f00" stroke="black"/>

  • V命令(垂直繪線)

    標明y軸移動到的位置,只在一個軸的方向上移動

    V y (or v dy)

    <path d="M10 10 V90 L 11 90 " fill="#f00" stroke="black"/>

  • Z命令 (閉合路徑)

    從當前點畫一條直線到路徑的起點,一般被放在路徑的最後

    Z (or z)

    <path d="M 10 10 h 70 v 80 h -35 Z" fill="#f00" stroke="black"/>

    上述路徑是:畫筆移動到(10,10)點,由此開始,向右移動70像素構成一條水平線,而後向下移動80像素,而後向左移動35像素,而後再回到起點。

(2)曲線命令
  • 三次貝塞爾曲線C命令

    三次貝塞爾曲線須要定義一個點和兩個控制點,須要設置三組座標參數

    C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

    這裏的最後一個座標(x,y)表示的是曲線的終點,另外兩個座標是控制點,(x1,y1)是起點的控制點,(x2,y2)是終點的控制點。控制點描述的是曲線起始點的斜率,曲線上各個點的斜率,是從起點斜率到終點斜率的漸變過程,斜率公式爲 tanα = (y2-y1)/(x2-x1) 當tanα>0時,直線與x軸夾角越大,斜率越大;當k<0時,直線與x軸夾角越大,斜率越小。

    <path d="M 10 10 C 10 50,90 50 , 90 10" fill="#f00" stroke="black"/>

    如上圖所示,第一個控制點沒有斜率,第二個控制點斜率 k = (10-20)/(90-80) = -1,角度爲135°

  • S命令

    S命令能夠用來建立與以前那些曲線同樣的貝塞爾曲線,可是,若是S命令跟在一個C命令或者另外一個S命令的後面,它的第一個控制點,就會被假設成前一個控制點的對稱點。若是S命令單獨使用,前面沒有C命令或者另外一個S命令,那麼它的兩個控制點就會被假設爲同一個點

    S x2 y2, x y (or s dx2 dy2, dx dy)

    <path d="M10 50 C 30 30 , 30 30, 50 50 S 80 80, 90 50 " fill="#f00" stroke="black"/>

    注: S的第一個控制點是C命令的第二個控制點的對稱點;

    注:兩個控制點相同

  • 二次貝塞爾曲線Q

    只須要一個控制點,用來肯定起點和終點的曲線斜率,須要兩組參數,控制點和終點座標

    Q x1 y1, x y (or q dx1 dy1, dx dy)

    <path d="M10 50 Q 30 10 , 90 50 " fill="#f00" stroke="black"/>

  • T命令

    T命令,能夠經過更簡短的參數,延長二次貝塞爾曲線。和以前同樣,快捷命令T會經過前一個控制點,推斷出一個新的控制點。這意味着,在你的第一個控制點後面,能夠只定義終點,就建立出一個至關複雜的曲線。須要注意的是,T命令前面必須是一個Q命令,或者是另外一個T命令,才能達到這種效果。若是T單獨使用,那麼控制點就會被認爲和終點是同一個點,因此畫出來的將是一條直線。

    T x y (or t dx dy)

    <path d="M10 50 Q 30 10 , 50 50 T 90 50" fill="#f00" stroke="black"/>

注:雖然三次貝塞爾曲線擁有更大的自由度,可是兩種曲線能達到的效果老是差很少的。具體使用哪一種曲線,一般取決於需求,以及對曲線對稱性的依賴程度

(3)弧形
  • 弧形命令A

    基本上,弧形能夠視爲圓形或橢圓形的一部分。假設,已知橢圓形的長軸半徑和短軸半徑,而且已知兩個點(在橢圓上),根據半徑和兩點,能夠畫出兩個橢圓,在每一個橢圓上根據兩點均可以畫出兩種弧形。因此,僅僅根據半徑和兩點,能夠畫出四種弧形。爲了保證建立的弧形惟一,A命令須要用到比較多的參數。

    A rx ry x-axis-rotation large-arc-flag sweep-flag x y

    a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

    • rx :半徑x
    • ry :半徑y
    • x-axis-rotation :橢圓傾斜的角度,值爲傾斜的角度值
    • large-arc-flag :決定弧線是大於仍是小於180度,0表示小角度弧,1表示大角度弧
    • sweep-flag :弧線的方向,0表示從起點到終點沿逆時針畫弧,1表示從起點到終點沿順時針畫弧

    <path d="M10 50 A 20 30 45 0 1 60 70" fill="#f00" stroke="black"/>

    注:起始點爲(20 30),rx = 20, ry = 30 , x-axis-rotation = 45 , large-arc-flag = 0 (這裏0或1沒什麼區別), sweep-flag = 1,終點爲(60 70);

    <path d="M10 50 A 20 30 0 0 0 60 70" fill="#f00" stroke="black"/>

若是你是從Canvas過渡到SVG,那麼弧形會比較難以掌握,但它也是很是強大的。用路徑來繪製完整的圓或者橢圓是比較困難的,由於圓上的任意點均可以是起點同時也是終點,無數種方案能夠選擇,真正的路徑沒法定義。經過繪製連續的路徑段落,也能夠達到近似的效果,但使用真正的circle或者ellipse元素會更容易一些。

相關文章
相關標籤/搜索