SVG基礎(chǔ)總結(jié)

來源：SegmentFault 思否

作者：nicezhu

最近在工作中做一個h5相關(guān)的半圓進度組件需求，便開始學(xué)習(xí)了下svg。

SVG 是使用 XML 來描述二維圖形和繪圖程序的語言，SVG指可伸縮矢量圖形 (Scalable Vector Graphics)

SVG基本屬性

SVG的坐標系統(tǒng)

在介紹其它屬性時，必須先介紹svg的坐標系統(tǒng)，和我們高中學(xué)的坐標系有點不同，也可以說是第一象限按x軸翻轉(zhuǎn)得到svg的坐標系。y軸右方x為正值，x軸下方y(tǒng)為正值。

SVG 值的單位

在svg中默認的單位為px，可以寫單位，也可以不寫單位。

svg視窗大小大小

每次你創(chuàng)建了一個新的SVG元素，你也就創(chuàng)建了一個新的SVG視窗。視窗的大小等于你為SVG元素設(shè)置的寬度和高度。

svg在絕大多數(shù)瀏覽器中，默認大小為長300px，寬150px的大小，實際應(yīng)用中推薦制定svg的width和height值。

<svg width="100" height="100">svg>

SVG 畫布

畫布是無限大的，意味著你可以在畫布上畫無限大的內(nèi)容，但是，當(dāng)你畫的內(nèi)容超過svg視窗大小的時候你是看不到的，但畫布的內(nèi)容是存在的，好比css中的overflow:hidden屬性只是遮擋了可視區(qū)域的內(nèi)容。

從一個簡單的例子看下。

<svg>  <circle cx="0" cy="0" r="50" fill="green" />svg>

我們畫了一個圓，但是在svg視窗里并未顯示全部的圓，那是因為圓的中心默認是坐標系的（0，0）位置。

當(dāng)我們對svg設(shè)置overflow: visible;時便顯示了完整的圓。

設(shè)置圓的中心，讓其顯示在svg視窗中

<circle cx="50" cy="50" r="50" fill="green" />

svg預(yù)定義的形狀

• 矩形
• 圓形
• 橢圓
• 線
• 折線
• 多邊形
• 路徑

SVG Stroke相關(guān)

SVG提供了一個范圍廣泛stroke 屬性。

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray
• stroke-dashoffset

這些屬性很常用，尤其是stroke-dasharray和stroke-dashoffset組合我們可以實現(xiàn)很多生動的進度效果。

stroke 屬性

Stroke屬性定義一條線，文本或元素輪廓顏色：

stroke-width 屬性

stroke- width屬性定義了一條線，文本或元素輪廓厚度：

stroke-linecap 屬性

strokelinecap屬性定義不同類型的開放路徑的終結(jié)：

<svg>  <g fill="none" stroke="black" stroke-width="6">    <path stroke-linecap="butt" d="M5 20 l215 0" />    <path stroke-linecap="round" d="M5 40 l215 0" />    <path stroke-linecap="square" d="M5 60 l215 0" />  g>svg>

strokedasharray屬性用于創(chuàng)建虛線。

stroke-dasharray為一個參數(shù)時：其實是表示虛線長度和每段虛線之間的間距

兩個參數(shù)或者多個參數(shù)時：一個表示長度，一個表示間距

<svg>  <g fill="none" stroke="black" stroke-width="4">    <path stroke-dasharray="5,5" d="M5 20 l215 0" />    <path stroke-dasharray="10,10" d="M5 40 l215 0" />    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />  g>svg>

stroke-dashoffset 屬性

這個屬性是相對于起始點的偏移，正數(shù)偏移x值的時候，相當(dāng)于往左移動了x個長度單位，負數(shù)偏移x的時候，相當(dāng)于往右移動了x個長度單位。

 <svg>        <line x1="0" y1="10" x2="100" y2="10" stroke="red" stroke-width="5" />        <line          x1="0"          y1="10"          x2="100"          y2="10"          class="line1"          stroke-dasharray="70"          stroke-dashoffset="0"        />
svg>