《SVG精髓》筆記（一）

本文是基於《SVG精髓》一書的簡單總結，文中的demo均爲該書提供，目的是方便你們使用時快速查閱。

1. 座標系統

• 視口（viewport）：文檔使用的畫布區域，表示SVG可見區域的大小，一般能夠在 <svg>元素 上使用 width 和 height 屬性肯定視口的大小。

• viewBox：容許指定一個給定的一組圖形伸展以適應特定的容器元素。這個屬性值由4個數值組成，viewBox = <min-x> <min-y> <width> <height>， 分別表明想要疊加在視口上的用戶座標系統的最小x座標、最小y座標、寬度和高度。（能夠理解爲SVG內元素定位的真實座標系統）

  <svg width="4cm" height="5cm" viewBox="0 0 64 80">
    <rect x="10" y="20" width="40" height="40" style="stroke: black; fill: none"/>
  </svg>

  
  
  
  viewport寬高爲4cm和5cm（畫布區域），viewBox的左上角(0, 0)與viewport重合，寬度是64個單位（每一個單位1/16cm），高度是80個單位（每一個單位1/16cm）。矩形rect的座標是相對viewBox來定位的（若是沒有設置viewBox，默認座標系統就是viewport）demo1

• preserveAspectRatio：能夠指定被縮放的圖像相對視口的對齊方式，以及是但願它適配邊緣仍是要裁減。該屬性的模型爲:

  preserveAspectRatio = "alignment [meet | slice]"

  alignment ：指定軸和位置，由一個x對齊方式和一個y對齊方式（min, mid, max）組合而成。默認爲xMidYMid 。

  y對齊	xMin	xMid	xMax
  yMin	xMinYmin 視口左側邊緣、頂部邊緣對齊	xMidYmin 視口水平中心、頂部邊緣對齊	xMaxYmin 視口右側邊緣、頂部邊緣對齊
  yMid	xMinYmid 視口左側邊緣、垂直中心	xMidYmid 視口水平中心、垂直中心	xMaxYmid 視口右側邊緣、垂直中心
  yMax	xMinYmax 視口左側邊緣、底部邊緣對齊	xMidYmax 視口水平中心、底部邊緣對齊	xMaxYmax 視口右側邊緣、底部邊緣對齊

  meet ：縮小圖像以適配可用的空間。
  slice ：裁減圖像不適合視口的部分。
  
  
  上面的例子中，viewport和viewBox的寬高是等比縮放的，若是比例不一樣，就有可能出現溢出demo2

2. 基本形狀

• SVG中的基本形狀

  形狀	描述
  <line x1="start-x" y1="start-y" x2="end-x" y2="end-y" />	從起始點(start-x, start-y) 畫一條線到 (end-x, end-y) demo
  <rect x="left-x" y="top-y" width="width" height="height" />	畫一個矩形，左上角位於(left-x, top-y)，寬高分別爲width和height demo
  <circle cx="center-x" cy="center-y" r="radius" />	以指定半徑radius畫一個圓，圓心位於(center-x, center-y) demo
  <ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius" />	畫一個橢圓，x方向半徑爲x-radius，y方向半徑爲y-radius， 圓心位於(center-x, center-y)
  <polygon points="points-list" />	畫一個封閉圖形，輪廓由points-list指定，它由一系列x/y座標對組成。 這些數值只能使用用戶座標，不能夠添加長度單位。 demo
  <polyline points="points-list" />	畫一系列相連的折線段，折線點由points-list指定， 它由一系列x/y座標對組成。 這些數值只能使用用戶座標，不能夠添加長度單位。 demo

• 筆畫特性

  屬性	值
  stroke	筆畫顏色，默認爲none demo
  stroke-width	筆畫寬度，可用用戶座標或者指定單位的方式指定。 筆畫的寬度會相對座標網格線居中。默認值爲1 demo
  stroke-opacity	從0.0到1.0的數字。0.0是徹底透明，1.0是徹底不透明（默認值） demo
  stroke-dasharray	用一系列的數字來指定虛線和間隙的長度。 這些數字只能使用用戶座標，默認值爲none demo
  stroke-linecap	線頭尾的形狀，值爲butt（默認值）、round或square demo
  stroke-linejoin	圖形的棱角或者一系列連線的狀態， 取值爲miter（尖的，默認值），round或者bevel（平的） demo
  stroke-miterlimit	相交處顯示寬度與線寬的最大比例，默認值是4 demo

• 填充特性

  屬性	值
  fill	填充顏色，默認值爲black
  fill-opacity	從0.0到1.0的數字。0.0是徹底透明，1.0是徹底不透明（默認值）
  fill-rule	屬性值爲nonzero（默認值）或evenodd。 該屬性決定判斷某個點是否在圖形內部的方法。 只有當邊線交叉時或者內部有「洞」時纔有效。

---

    這裏只介紹了該書的兩個章節，它們是理解學習SVG的基礎。接下來，咱們將一塊兒學習SVG裏面經常使用的元素標籤和座標系統變換。

原文連接： http://codesnote.com/svg_tuto...