html5內聯SVG——標籤
阿新 • • 發佈：2019-02-03
什麼是SVG？
- SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
- SVG 用於定義用於網路的基於向量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 影象在放大或改變尺寸的情況下其圖形質量不會有損失
- SVG 是全球資訊網聯盟的標準
SVG 的優勢
與其他影象格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
- SVG 影象可通過文字編輯器來建立和修改
- SVG 影象可被搜尋、索引、指令碼化或壓縮
- SVG 是可伸縮的
- SVG 影象可在任何的解析度下被高質量地列印
- SVG 可在影象質量不下降的情況下被放大
——以上摘自W3C
<path>標籤
<path>是一個模擬畫圖動作的svg標籤，擁有很強的表達能力，主要藉助其基於計算的向量性質。d屬性：
是一個字串，字串編碼了path的畫法，可以看成若干命令組成，命令可以帶引數（一般是帶座標引數）。解析字串是在看到命令時結束上一個命令並分段。形式類似：
"M 100 100 L 300 100 L 200 300 z"
出現了三個命令：M,L,z。其中M，L命令是帶座標引數的。z不帶。
M :- moveto 將繪畫點重置到指定點上
L :- lineto 從當前的點畫一條直線到目標點上，同時當前點更新
z :- last,closepath 從當前點連回最早的點，以line的形式
fill屬性：
圖形如果閉合的話在圖形裡面顯示特定顏色。
stroke屬性:邊的顏色
stroke-width屬性：邊寬
示例：
<path d="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3" />
通常一個命令的大寫版本表示絕對定位，小寫版本表示相對定位。即使其實並不存在區別，命令也會有大小寫版本，如Zz.
M m:moveto
Z z:closepath
L l:lintto
H h:horizontal lineto :這個只有一個可以看成y值不變的L l
V v:verical lineto:類似H h，x值不變
C c:curveto 給定三個座標，以前兩個為控制點，作從當前點到第三個點的貝塞爾曲線，並且更新當前點
S s:shorthand/smooth curveto 上面的簡化版本，省略第一個座標的給出，第一個座標被自動設定為當前點與上一個貝塞爾曲線命令第二個座標的的相對點。所以你可以連續用S繪製。
Q q:quadratic Bezier curveto 就是隻有一個控制點的貝塞爾曲線
T t:Shorthand/smooth quadratic Bezier curveto省略一個控制點的一個控制點的貝塞爾曲線，那個點被取成上一個一個控制點的貝塞爾曲線與當面點的相對點。
A a:ellipical arc 這個東西比較蛋疼，一共六個引數，原x半徑，原y半徑，橢圓自x軸旋轉角度（這個旋轉貌似是順時針轉的，可能是因為y軸是反著取的），大弧flag，sweep_flag,目標點x,y。其中前三個引數是為了確定一個橢圓，現在可以把一個橢圓嵌到當前點和目標點中，我們畫的就是兩點之間的弧。然而事實上可以嵌入對稱的兩個橢圓，而且弧也有取大取小兩種取法，這就使用兩個flag（0,1編碼）確定到底取四個弧中的哪一個。大小弧flag容易理解（1取大的），sweep flag大致說是若取1則取“正角度”那邊的（那邊不是同一個橢圓，而是一個橢圓的大邊以及另一個橢圓的小邊作為一邊，這個看圖就清楚），稍微考慮一下就知道的確一邊旋轉方向是一致的，另一邊相反，不管y軸有沒有看成倒置。不過奇葩的是貌似正反是按照看到的方向來算的而不是倒置的方向。總之螢幕或者矩陣這種y倒置的副作用真的挺蛋疼