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 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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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

值都在保持viewBox的寬高比的情況下強制拉伸，并且指定在視窗内如何對齊viewBox。我們會簡短介紹

align

的值。

最後一個屬性，

meetOrSlice

也是可選的，預設值為

meet

。這個屬性聲明整個

viewBox

在視窗中是否可見。如果是，它和

align

參數通過一個或多個空格分隔。例如：

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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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的。