教你用SVG畫出一條龍，SVG畫一條龍

教你用SVG畫出一條龍，SVG畫一條龍

先看demo，九十七度

 

其實使用svg畫出這條龍很簡單，關鍵不在於怎麼使用svg，而在於你的美術功底，哈哈。

好吧，當然基礎是不能忽略的，先看下這條龍的代碼：

 

      <svg id="long" xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="450">        <path  stroke="#fff" stroke-width="10" fill="#fff"          d="M40,120 l5,0 l5,-1 l5,0 l5,1 l5,-1 l5,-3 l3,3 l3,-4 l3,-3 l3,-4 l3,-3 l0,-10 l3,-3 l3,-2 l8,0 l3,2 l3,3 l3,3 l3,2 l3,2 l8,0 l5,-3 l5,-4 l2,-5 l5,2 l10,-10 l1,-5 l4,2 l30,-24 l-3,-4 l7,0 l5,-5 l10,-8 l10,-10 l10,-8 l5,-3 l5,-2           l5,0 l2,2 l2,4 l-3,4 l-10,2 l-4,2 l-10,5 l-25,20 l 10,-2 l 10,2 l10,3 l10,6 l5,6 l2,6 l0,6 l10,-6 l10,-7 l10,-6 l5,-3 l5,-4 l 5,-2 l5,0 l3,4 l0,3 l-2,1 l-2,0 l-10,0 l-38,24 l0,10 l1,3 l4,2 l0,8 l-5,8 l-15,15 l-5,2 l-10 ,1 l-10,0 l-10,-1 l-20,2 l-10,0 l-10,-1 l-10,-2 l-10,0 l-10,1 l-20,4 l-40,20 l-5,-3 l-10,-10 l2,-5 l2,5 l5,0 l10,1 l5,-1 l10,-5 l20,-10 l10,-2 l-20,-1 l-2,-5 l-2,5 l-10,2 l-10,0 l-10,-1 l-10,0 l-10,1 l-2,-2 l0,-2 l-1,-5 l5,-2 l5,1 z"/>        <path  stroke="#fff" stroke-width="10" fill="#fff"          d="M 180,135 q -80,60, -60,90  q 60,30 30,90 c -120,180 -90,-90 100,-100 c 90,-10 -60,-60 10,10 c 30,30  120,60  0,190          c 100,-90 100,-150  10,-190 c -60,-50 30,-30 0,-10 c -120,30  -120,30    -175,140 c -30,110 150,-90 80,-120 c -30,-30 -60,-30  37,-100 z"/>      </svg>

 

對的，其實畫龍只需要svg 路徑path的命令就足以了。使用線條L、弧線C、Q 足夠了，接下來你只要熟悉下path的命令就ok了，下面是傳送門：

SVG《Path》命令詳解

完美，學完這個是不是感覺什麼畫都能畫出來呢，哈哈，的確，只要你熟悉在電腦上作畫的方式，你使用svg也很容易完成你的作品。