使用SVG畫小貓咪

</pre>SVG畫簡易小貓咪：<p>第一幅圖是別人的，圖2是自己畫的</p><p><img src="https://img-blog.csdn.net/20150321204228584?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVFRPX09UVA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.csdn.net/20150321204205987?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVFRPX09UVA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>-----------------------------分割線----------------------------</p><p>代碼部分：</p><p></p><pre name="code" class="html"><!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8" />  
    <title>好玩的SVG---可愛的小貓咪</title>  
</head>  
<body>  
<!--SVG-小貓咪-->  
<svg width="200" height="200">  
        <title>Cat</title>  
        <desc>Stick Figure of a Cat</desc>  
        <!--畫貓咪臉輪廓-->  
        <circle cx="100" cy="95" r="50" style="stroke: black; fill: none;" />  
        <!--畫貓咪臉兩隻眼睛-->  
        <circle cx="85" cy="80" r="5" stroke="black" fill="#008B8B" />  
        <circle cx="115" cy="80" r="5" stroke="black" fill="#008B8B" />  
        <!--畫出右側鬍子，折線-->  
        <g id="whiskers">  
            <line x1="105" y1="95" x2="165" y2="85" style="stroke: black;" />  
            <line x1="105" y1="95" x2="165" y2="105" style="stroke: black;" />  
        </g>  
        <!--根據右側鬍子畫左側鬍子-->  
        <use xlink:href="#whiskers" transform="scale(-1 1) translate(-200 0)" />  
        <!-- ears -->  
        <polyline points="138 62, 150 10, 100 45, 50 10, 62, 62"  
                  style="stroke: black; fill: none;" />  
        <!-- mouth1 -->  
        <!--  
        <polyline points="65 110, 75 120, 125 120, 135, 110"  
                  style="stroke: black; fill: none;" />  
        -->  
         <!-- mouth2 -->  
        <path d="M70 115 C95 130,110 130,130 115" fill="none" stroke="blue" stroke-width="5"/>          
        <!-- nose -->  
        <path d="M 105 90 L 95 90 A 5 10 0 0 0 105 90"  
              style="stroke: black; fill: #ffcccc" />  
    </svg>  
</body>  
</html>

說明：

下面是每個形狀的使用說明(這裏只介紹控制圖形形狀和位置的基本屬性，填充等屬性放到後面總結)。

矩形 - rect元素
這個元素有6個控制位置和形狀的屬性，分別是：
x：矩形左上角的座標(用戶座標系)的x值。
y：矩形左上角的座標(用戶座標系)的y值。
width：矩形寬度。
height：矩形高度。
rx：實現圓角效果時，圓角沿x軸的半徑。
ry：實現圓角效果時，圓角沿y軸的半徑。
比如上面例子中，實現了圓角效果，你也可以通過設置rx,ry爲不同的值實現橢圓角效果。

圓 - circle元素
這個元素的屬性很簡單，主要是定義圓心和半徑：
r：圓的半徑。
cx：圓心座標x值。
cy：圓心座標y值。

<span style="color:#cc0000;">橢圓 - ellipse元素</span>
這個是更加通用的圓形元素，你可以分別控制半長軸和半短軸的長度，來實現不同的橢圓，很容易想到，當兩個半軸相等時，就是正圓形了。
rx：半長軸(x半徑)。
ry：半短軸(y半徑)。
cx：圓心座標x值。
cy：圓心座標y值。

直線 - line元素
直線需要定義起點與終點即可：
x1：起點x座標。
y1：起點y座標。
x2：終點x座標。
y2：終點y座標。

折線 - polyline元素
折線主要是要定義每條線段的端點即可，所以只需要一個點的集合作爲參數：
points：一系列的用空格，逗號，換行符等分隔開的點。每個點必須有2個數字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成："0 0, 1 1, 2 2"。

多邊形 - polygon元素
這個元素就是比polyline元素多做一步，把最後一個點和第一個點連起來，形成閉合圖形。參數是一樣的。
points：一系列的用空格，逗號，換行符等分隔開的點。每個點必須有2個數字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成："0 0, 1 1, 2 2"。

路徑 - path元素
這個是最通用，最強力的元素了；使用這個元素你可以實現任何其他的圖形，不僅包括上面這些基本形狀，也可以實現像貝塞爾曲線那樣的複雜形狀；此外，使用path可以實現平滑的過渡線段，雖然也可以使用polyline來實現這種效果，但是需要提供的點很多，而且放大了效果也不好。這個元素控制位置和形狀的只有一個參數：
d：一系列繪製指令和繪製參數(點)組合成。

繪製指令分爲絕對座標指令和相對座標指令兩種，這兩種指令使用的字母是一樣的，就是大小寫不一樣，絕對指令使用大寫字母，座標也是絕對座標；相對指令使用對應的小寫字母，點的座標表示的都是偏移量。

絕對座標繪製指令：
這組指令的參數代表的是絕對座標。假設當前畫筆所在的位置爲(x0,y0)，則下面的絕對座標指令代表的含義如下所示：

指令參數說明
M x y 將畫筆移動到點(x,y)
L x y 畫筆從當前的點繪製線段到點(x,y)
H x 畫筆從當前的點繪製水平線段到點(x,y0)
V y 畫筆從當前的點繪製豎直線段到點(x0,y)
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 畫筆從當前的點繪製一段圓弧到點(x,y)
C x1 y1, x2 y2, x y 畫筆從當前的點繪製一段三次貝塞爾曲線到點(x,y)
S x2 y2, x y 特殊版本的三次貝塞爾曲線(省略第一個控制點)
Q x1 y1, x y 繪製二次貝塞爾曲線到點(x,y)
T x y 特殊版本的二次貝塞爾曲線(省略控制點)
Z 無參數繪製閉合圖形，如果d屬性不指定Z命令，則繪製線段，而不是封閉圖形。
總結：
移動畫筆指令M，畫直線指令：L，H，V，閉合指令Z都比較簡單；下面重點看看繪製曲線的幾個指令。