svg用法--svg的一些屬性

SVG邊線邊框屬性

例子中<path stroke="red" d="M0 10 l300 0" />即從點0,10 開始，連直線到點 200，0（相對位置）；

或者<path stroke="green" d="M0 40 L300 40" />即即從即從點 5,20 開始，連直線到點 300，40（相對位置）；

• SVG stroke 屬性

  這個stroke屬性用來定義圖形、文本等的邊線顏色：

  下面的圖形使用的SVG代碼：

  <svg height="100" width="400">
    <g fill="none">
      <path stroke="red" d="M0 10 l300 0" />
      <path stroke="green" d="M0 40 L300 40" />
      <path stroke="blue" d="M0 70 L300 70" />
    </g>
  </svg>

  
  
  
  

• SVG stroke-width 屬性

  stroke-width屬性用來定義圖形或文字邊線的寬度：

  下面的圖形使用的SVG代碼：

  <svg height="100" width="400">
    <g fill="none" stroke="red">
      <path stroke-width="2" d="M0 10 l300 0" />
      <path stroke-width="4" d="M0 40 L300 40" />
      <path stroke-width="6" d="M0 70 L300 70" />
    </g>
  </svg>

  
  
  
  

• SVG stroke-linecap 屬性

  stroke-linecap屬性用來定義開放式路徑的端點的樣子：

  下面的圖形使用的SVG代碼：

  <svg height="100" width="400">
    <g fill="none" stroke="red" stroke-width="16">
      <path stroke-linecap="butt" d="M0 10 l300 0" />
      <path stroke-linecap="round" d="M0 40 L300 40" />
      <path stroke-linecap="square" d="M0 70 L300 70" />
    </g>
  </svg>

  
  

• SVG stroke-dasharray 屬性

  stroke-dasharray屬性用來創建虛線：

  下面的圖形使用的SVG代碼：

  <svg height="100" width="400">
    <g fill="none" stroke="red" stroke-width="6">
      <path stroke-dasharray="6,6" d="M0 10 l300 0" />
      <path stroke-dasharray="20,6" d="M0 40 L300 40" />
      <path stroke-dasharray="20,6,6,6,6,20" d="M0 70 L300 70" />
    </g>
  </svg>

  
  

  SVG transform

• transform	描述
  translate(x, y)	平移: 將用戶座標系統的座標原點移動到(x, y)
  scale(xFactor, yFactor)	縮放: 將用戶座標系統的xy軸單位長度分別乘(xFactor, yFactor)倍
  scale(factor)	縮放: 同 scale(factor, factor)
  rotate(angle, centerX, centerY)	旋轉: 將用戶座標系統以(centerX, centerY)爲旋轉中心順時針旋轉 angle 度
  rotate(angle)	旋轉: 同 rotate(angle, 0, 0)
  skewX(angle)	傾斜: 根據 angle 傾斜所有 x 軸座標, 視覺上會看到 y 軸傾斜...
  skewY(angle)	傾斜: 根據 angle 傾斜所有 y 軸座標, 視覺上會看到 x 軸傾斜...
  matrix(a b c d e f)	矩陣變換: 將座標系統進行矩陣變換, 詳細內容請參考後續文章

  <svg width="500" height="300"> <path d="M 20 20 v 100  h 100 v -100 z" fill="none" stroke="red" stroke-width="3" /> </svg> 

  
  

  <svg width="500" height="300"> <path d="M 20 20 v 100  h 100 v -100 z" fill="none" stroke="red" stroke-width="3" transform="rotate(45 40 90)"/> </svg> 

  
  
  svg的viewBox和preserveAspectRatio屬性
  

• SVG viewBox 屬性

  SVG通過有限區域展現在屏幕上，這個區域叫做viewport。SVG中超出視窗邊界的區域會被裁切並且隱藏。

           （viewBox="x, y, width, height"  // x:左上角橫座標，y:左上角縱座標，width:寬度，height:高度）

<svg width="400" height="300" viewBox="0 0 200 150" style="border:1px solid #cd0000;">
      <image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
    </svg>

viewBox="0 0 200 150"

1. 它聲明瞭一個特定的區域，畫布橫跨左上角的點(0,0)到點(200,150)。
2. SVG圖像被這個區域裁切。
3. 區域被拉伸（類似縮放效果）來充滿整個視窗。
   
4. 用戶座標系被映射到視窗座標系-在這種情況下-一個用戶單位等於兩個視窗單位。

<svg width="400" height="300" viewBox="20 20 200 150" style="border:1px solid #cd0000;">
      <image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
    </svg>

添加viewBox="20 20 200 150"的效果如下。圖形被裁切然後拉伸來充滿整個視窗區域。

上面的例子，SVG的寬高比正好和viewBox的寬高比是一樣的，都是4:3. 顯然，實際應用viewBox不可能一直跟viewport穿同一條開襠褲。此時，就需要preserveAspectRatio出馬了，此屬性也是應用在<svg>元素上，且作用的對象都是viewBox。preserveAspectRatio屬性讓你可以在保持寬高比的情況下強制統一viewBox的縮放比，並且如果不想用默認居中你可以聲明viewBox在視窗中的位置。

preserveAspectRatio的官方語法是：  preserveAspectRatio = defer? <align> <meetOrSlice>？

它在任何建立新viewport的元素上都有效（我們會在這個系列的下一部分討論這個問題）。

defer聲明是可選的，並且只有當你在<image>上添加preserveAspectRatio才被用到。用在任何其他元素上時它都會被忽略。<images>本身不在這篇文章的討論範圍，我們暫時跳過defer這個選項。

align參數聲明是否強制統一放縮，如果是，對齊方法會在viewBox的寬高比不符合viewport的寬高比的情況下生效。

如果align值設爲none，例如：

preserveAspectRatio = "none"

圖形不在保持寬高比而會縮放來適應視窗，像我們在上面兩個例子中看到的那樣。

其他所有preserveAspectRatio值都在保持viewBox的寬高比的情況下強制拉伸，並且指定在視窗內如何對齊viewBox。我們會簡短介紹align的值。

最後一個屬性，meetOrSlice也是可選的，默認值爲meet。這個屬性聲明整個viewBox在視窗中是否可見。如果是，它和align參數通過一個或多個空格分隔。例如：

preserveAspectRatio = "xMidYMid slice"

preserveAspectRatio屬性的值爲空格分隔的兩個值組合而成。例如，上面的xMidYMid和meet.

第1個值表示，viewBox如何與SVG viewport對齊；第2個值表示，如何維持高寬比（如果有）。

其中，第1個值又是由兩部分組成的。前半部分表示x方向對齊，後半部分表示y方向對齊。家族成員如下：

值含義

xMin	viewport和viewBox左邊對齊
xMid	viewport和viewBox x軸中心對齊
xMax	viewport和viewBox右邊對齊
YMin	viewport和viewBox上邊緣對齊。注意Y是大寫。
YMid	viewport和viewBox y軸中心點對齊。注意Y是大寫。
YMax	viewport和viewBox下邊緣對齊。注意Y是大寫。

preserveAspectRatio屬性第2部分的值支持下面3個：

值含義

meet	保持縱橫比縮放viewBox適應viewport
slice	保持縱橫比同時比例小的方向放大填滿viewport
none	扭曲縱橫比以充分適應viewport

<svg width="400" height="300"  viewBox="0 0 100 100" style="border:1px solid #cd0000;">
      <image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
    </svg>

<svg width="400" height="300" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin slice" style="border:1px solid #cd0000;">
      <image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="80px"/>
    </svg>

默認應該是"xMidYmid meet"效果。表現原理爲：SVG寬400, 高200，viewBox寬200, 高200. x橫軸比例是2, y縱軸比例是1.meet的作用是讓viewBox等比例的同時，完全在SVG的viewport中顯示。這裏，最小比例是縱向的1，所以，實際上viewBox並沒有任何的縮放。

無論是meet還是slice，你是不可能在一種狀態下同時看到x, y方向上的位移的。因爲總會有一個方向是充滿viewport的。