如何使用SVG和簡單圖形繪制(1)

SVG(Scalable Vector Graphics——可縮放矢量圖)，SVG圖在放大或縮小的情況下不會失真

在SVG中全部使用标簽來繪圖，這些标簽就相當于平時的html标簽

SVG的使用

SVG的使用很簡單，隻需要添加一個svg标簽即可

#svg{
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
}

<body>
    <svg id="svg">
        <line x1="100" y1="100" x2="200" y2="200"></line>
    </svg>
</body>

添加好svg标簽後，再使用其他用來畫圖的svg标簽(比如上面的line标簽)便能畫圖了

使用SVG繪制圖形

直線

line{
    stroke: black;
    /*将直線用黑色描出來，否則直線不可見*/
}

<svg id="svg">
    <line x1="100" y1="100" x2="200" y2="200"></line>
</svg>

line标簽的行内屬性解釋：

x1,y1确定直線起點，x2,y2确定直線終點

注意：需要為line标簽設定‘stroke:顔色’css屬性後直線才能展現出來

矩形

rect{
    fill:transparent;/*設定填充為透明，去掉預設的填充*/
    stroke: black;/*再用stroke将矩形邊框描出來*/
}

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

rect标簽行内屬性解釋：

x,y确定矩形左上角坐标（畫矩形的起點）、width/height設定矩形寬高、rx,ry設定矩形四個角上，水準與垂直方向的圓角

如何使用SVG和簡單圖形繪制(1)

注意：rect繪制矩形時不用設定stroke或fill樣式就能将矩形展現出來，因為預設畫出來的是用黑色填充的矩形。我們可以像上面那樣——使用fill設定透明填充，用邊框來展現矩形

圓形

circle{
    fill:transparent;
    stroke: black;
}

<svg id="svg">
    <circle r="50" cx="250" cy="250"></circle>
</svg>

circle标簽行内屬性解釋：

r确定圓的半徑、cx,cy确定圓心

注意：circle繪制圓時不用設定stroke或fill樣式就能将圓展現出來，因為預設畫出來的是用黑色填充的圓。我們可以像上面那樣——使用fill設定透明填充，用邊框來展現圓

橢圓

ellipse{
    fill:transparent;
    stroke: black;
}

<svg id="svg">
    <ellipse rx="50" ry="100" cx="250" cy="250"></ellipse>
</svg>

ellipse标簽行内屬性解釋：

rx,ry分别确定橢圓橫半軸與縱半軸長度，cx,cy确定圓心

注意：circle繪制橢圓時不用設定stroke或fill樣式就能将橢圓展現出來，因為預設畫出來的是用黑色填充的橢圓。我們可以像上面那樣——使用fill設定透明填充，用邊框來展現橢圓

折線

polyline{
    fill:transparent;
    stroke: black;
}

<svg id="svg">
    <polyline points="0 0, 100 100, 200 0, 300 100, 400 0"></polyline>
</svg>

polyline标簽行内屬性解釋：

就是由‘,’分割的一組族坐标點組成，将這些點連起來就是一條折線

注意：polyline繪制折線時不用設定stroke或fill樣式就能将折線展現出來，因為預設畫出來的是将折線起點與終點連起來(隻是形式上連起來)後用黑色填充的封閉圖形。我們可以像上面那樣——使用fill設定透明填充，用邊框來展現折線

多邊形

<svg id="svg">
    <polygon points="50 50,100 100,150 50,200 100"></polygon>
</svg>

polygon标簽行内屬性解釋

就是由‘,’分割的一組族坐标點組成，将這些點連起來就是一條折線，再将折線的起始點與終點連起來（實際上的連接配接）便是一個多邊形

注意：polygon繪制多邊形時不用設定stroke或fill樣式就能将多邊形展現出來，因為預設畫出來的是将折線起點與終點連起來後用黑色填充的封閉圖形。我們可以像上面那樣——使用fill設定透明填充，用邊框來展現多邊形

文本

<svg id="svg">
    <text x="100" y="100">Hello World!</text>
</svg>

text标簽行内屬性解釋：

x,y确定文本框左上角坐标

注意：文本會直接顯示，不用stroke或fill

一些樣式屬性

這些屬性用來設定圖形的css樣式，寫在樣式表中，上面代碼已經展現了

‘fill:顔色’

設定填充顔色

‘fill-opacity:透明度’

設定填充色透明度

‘stroke:顔色’

設定描邊顔色

‘stroke-width:10px’

設定描邊寬度

‘stroke-opacity:透明度’
stroke-linecap: butt | round | square(預設)

如何使用SVG和簡單圖形繪制(1)

用于設定一條線起點與終點兩個端點的樣式

polyline{
    fill: transparent;

    stroke: black;
    stroke-width: 10px;
    stroke-linecap: round;
}

<svg id="svg">
    <polyline points="20 10, 100 100, 200 10, 300 100, 400 10"></polyline>
</svg>

stroke-linejoin: bavel | round | miter

如何使用SVG和簡單圖形繪制(1)

用于設定一條線拐點處的樣式，不包含起點與終點兩個端點

polyline{
    fill: transparent;

    stroke: black;
    stroke-width: 10px;
    stroke-linejoin: miter;
}

<svg id="svg">
    <polyline points="20 10, 100 100, 200 10, 300 100, 400 10"></polyline>
</svg>

如何使用SVG和簡單圖形繪制(1)