SVG基礎總結

最近在工做中作一個h5相關的半圓進度組件需求，便開始學習了下svg。

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

SVG基本屬性

SVG的座標系統

在介紹其它屬性時，必須先介紹svg的座標系統，和咱們高中學的座標系有點不一樣，也能夠說是第一象限按x軸翻轉獲得svg的座標系。y軸右方x爲正值，x軸下方y爲正值。

SVG 值的單位

在svg中默認的單位爲px，能夠寫單位，也能夠不寫單位。

svg視窗大小大小

每次你建立了一個新的SVG元素，你也就建立了一個新的SVG視窗。視窗的大小等於你爲SVG元素設置的寬度和高度。
svg在絕大多數瀏覽器中，默認大小爲長300px，寬150px的大小，實際應用中推薦制定svg的width和height值。

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

SVG 畫布

畫布是無限大的，意味着你能夠在畫布上畫無限大的內容，可是，當你畫的內容超過svg視窗大小的時候你是看不到的，但畫布的內容是存在的，比如css中的overflow:hidden屬性只是遮擋了可視區域的內容。

從一個簡單的例子看下。

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

咱們畫了一個圓，可是在svg視窗裏並未顯示所有的圓，那是由於圓的中心默認是座標系的（0，0）位置。
當咱們對svg設置overflow: visible;時便顯示了完整的圓。

設置圓的中心，讓其顯示在svg視窗中

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

svg預約義的形狀

• 矩形 <rect>
• 圓形 <circle>
• 橢圓 <ellipse>
• 線 <line>
• 折線 <polyline>
• 多邊形 <polygon>
• 路徑 <path>

SVG Stroke相關

SVG提供了一個範圍普遍stroke 屬性。

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

這些屬性很經常使用，尤爲是stroke-dasharray和stroke-dashoffset組合咱們能夠實現不少生動的進度效果。

stroke 屬性

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

stroke-width 屬性

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

stroke-linecap 屬性

strokelinecap屬性定義不一樣類型的開放路徑的終結：

<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>

stroke-dasharray 屬性

strokedasharray屬性用於建立虛線。
stroke-dasharray爲一個參數時： 實際上是表示虛線長度和每段虛線之間的間距
兩個參數或者多個參數時：一個表示長度，一個表示間距

<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 屬性

這個屬性是相對於起始點的偏移，正數偏移x值的時候，至關於往左移動了x個長度單位，負數偏移x的時候，至關於往右移動了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>