1.SVG

1.1<line> 標(biāo)簽

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結(jié)束
y2 屬性在 y 軸定義線條的結(jié)束

1.2<rect> 標(biāo)簽

<rect x="10" y="10" width="100" height="100"/>

rect 元素的 width 和 height 屬性可定義矩形的高度和寬度,x定義橫坐標(biāo)，y縱坐標(biāo)
**圓角矩形

<rect x="10" y="10"
        width="100" height="100"
        rx="15" ry="15"/>

rx 和 ry 屬性可使矩形產(chǎn)生圓角。

1.3<circle>標(biāo)簽

<circle cx="60" cy="60" r="50"/>

cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy，圓的中心會被設(shè)置為 (0, 0),r 屬性定義圓的半徑。

1.4<ellipse> 標(biāo)簽

<ellipse cx="300" cy="150" rx="200" ry="80"/>

cx 屬性定義圓點(diǎn)的 x 坐標(biāo)
cy 屬性定義圓點(diǎn)的 y 坐標(biāo)
rx 屬性定義水平半徑
ry 屬性定義垂直半徑

1.5<polygon> 標(biāo)簽

<polygon> 標(biāo)簽用來創(chuàng)建含有不少于三個邊的圖形。

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

points 屬性定義多邊形每個角的 x 和 y 坐標(biāo)

1.6<polyline> 標(biāo)簽

用來創(chuàng)建僅包含直線的形狀。

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

1.7<path> 標(biāo)簽

用來定義路徑。

<path d="M250 150 L150 350 L350 350 Z" />

上面的例子定義了一條路徑，它開始于位置 250 150，到達(dá)位置 150 350，然后從那里開始到 350 350，最后在 250 150 關(guān)閉路徑。

1.8顯示文字

<text x="325" y="160" font-size="30" style="fill:white">SVG</text>

x,y是文本開始坐標(biāo)。
文本主要使用text元素，在text元素中，空格的處理與HTML類似：換行和回車變成空格，而多個空格壓縮成單個空格。

1.9畫一朵花

 <!--畫一朵花,圓堆疊形成-->
    <!--中心圓 -->
    <circle cx="500" cy="150" r="50"
        style="fill: #FB9B60;"/>

    <!--莖-->
    <rect x="500" y="200" width="10" height="150"
          style="fill: #11710F;"/>

    <!--四個90度的點(diǎn) -->
    <circle cx="500" cy="90" r="10"
            style="fill: #FDF979;"/>
    <circle cx="440" cy="150" r="10"
            style="fill: #FDF979;"/>
    <circle cx="560" cy="150" r="10"
            style="fill: #FDF979;"/>
    <circle cx="500" cy="210" r="10"
            style="fill: #FDF979;"/>

    <!--左上角四分之一圓的點(diǎn) -->
    <circle cx="444.56" cy="127.03" r="10"
            style="fill: #FDF979;"/>
    <circle cx="457.57" cy="107.57" r="10"
            style="fill: #FDF979;"/>
    <circle cx="477.03" cy="94.56" r="10"
            style="fill: #FDF979;"/>

    <!--右上角四分之一圓的點(diǎn) -->
    <circle cx="555.43" cy="127.03" r="10"
            style="fill: #FDF979;"/>
    <circle cx="542.42" cy="107.57" r="10"
            style="fill: #FDF979;"/>
    <circle cx="522.96" cy="94.56" r="10"
            style="fill: #FDF979;"/>

    <!--右下角四分之一圓的點(diǎn) -->
    <circle cx="555.43" cy="172.96" r="10"
            style="fill: #FDF979;"/>
    <circle cx="542.42" cy="192.42" r="10"
            style="fill: #FDF979;"/>
    <circle cx="522.96" cy="205.43" r="10"
            style="fill: #FDF979;"/>


    <!--左下角四分之一圓的點(diǎn) -->
    <circle cx="444.56" cy="172.96" r="10"
            style="fill: #FDF979;"/>
    <circle cx="457.57" cy="192.42" r="10"
            style="fill: #FDF979;"/>
    <circle cx="477.03" cy="205.43" r="10"
            style="fill: #FDF979;"/>

    <!--向日葵的中間的種子-->
    <line x1="453.80" y1="130.86" x2="546.19" y2="130.86"
          style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="450" y1="150" x2="550" y2="150"
          style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="464.64" y1="114.64" x2="535.35" y2="114.64"
          style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="453.80" y1="169.14" x2="453.80" y2="169.14"
          style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="453.80" y1="169.14" x2="546.19" y2="169.14"
          style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="500" y1="100" x2="500" y2="200"
          style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="464.65" y1="185.35" x2="535.35" y2="185.35"
          style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="519.13" y1="103.80" x2="519.13" y2="196.19"
          style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="480.86" y1="103.80" x2="480.86" y2="196.19"
          style="stroke:rgb(99,99,99);stroke-width:2"/>

    <!--葉子：svg的path是路徑繪制,字母M后面的是繪圖起點(diǎn)坐標(biāo),字母C是curveto選項(xiàng),其后三個坐標(biāo)分別是起始控制柄,終止控制柄,以及終點(diǎn)坐標(biāo)。葉子輪廓代碼是:-->
    <path d="M510 280 C510 276 550 250 570 230 C570 235 530 250 510 280"
          style="fill:#11710F;stroke:#11aa42;stroke-width:1px"/>

curveto的參數(shù)

1.10 畫一顆小樹

    <ellipse cx="700" cy="150" rx="80" ry="100"
             style="fill: #11aa42"/>
    <polygon points="700,150 640,350 760,350"
             style="fill:#79241F;stroke-width:1"/>

預(yù)覽效果