在SVG中使用樣式（四種方式，可以聯想對照HTML樣式方法）
內聯樣式, 直接在標簽里設置style屬性
<circle cx='20' cy='20' r='10' style='stroke: black; fill: blue;'/>內部樣式表，可以同時為多個元素設置樣式 demo
<svg width="200px" height="200px" viewBox="0 0 200 200"> <defs> <style type="text/css"><![CDATA[ circle { fill: #ffc; stroke: blue; stroke-width: 2; stroke-dasharray: 5 3 } ]]></style> </defs> <circle cx="20" cy="20" r="10"/> <circle cx="20" cy="60" r="10" style="fill: #cfc"/></svg>????這里使用了<![CDATA[...]]>塊包裹<style>元素內的CSS代碼（在XML文檔中的所有文本都會被解析器解析，只有在CDATA部件之內的文本會被解析器忽略）
外部樣式表，將樣式寫在一個外部文件中，供一個或多個SVG文檔使用
<!-- ext_style.css --> * { fill: none; stroke: black; } rect { stroke-dasharray: 7 3;} .thick { stroke-width: 5; } <?xml-stylesheet href="ext_style.css" type="text/css"?> ... <rect x="10" y="20" width="40" height="30"/> <polygon class="thick" points="60 50, 60 80, 90 80"/> ...表現屬性，SVG允許我們將style里面的聲明直接當做SVG元素的屬性使用。以下兩段代碼效果是相同的。
<!-- 內聯樣式 --><circle cx="10" cy="10" r="5" style="fill: red; stroke: black; stroke-width: 2;"/><!-- 表現屬性 --><circle cx="10" cy="10" r="5" fill="red"; stroke="black"; stroke-width="2"/>表現屬性是所有樣式中優先級最低的，但會覆蓋繼承的樣式。
SVG提供了一些元素，允許我們對元素進行分組，從而使文檔更加結構化、更易理解。<g>元素
<g>元素會將其所有子元素作為一個組合，通常組合還會有一個唯一的id作為名稱。每個組合還可以擁有自己的<title>和<desc>。并為子元素提供一些注解，使得文檔結構更為清晰。在<g>標簽中定義的樣式，會應用到所有子元素上。
（元素g是用來組合對象的容器。添加到g元素上的變換會應用到其所有的子元素上。添加到g元素的屬性會被其所有的子元素繼承。此外，g元素也可以用來定義復雜的對象，之后可以通過<use>元素來引用它們。）<use>元素
SVG使用<use>元素，為定義在<g>元素內的組合或任意獨立圖形元素提供了類似復制粘貼的能力。<defs>元素
SVG 允許我們定義以后需要重復使用的圖形元素。 建議把所有需要再次使用的引用元素定義在defs元素里面。這樣做可以增加SVG內容的易讀性和可訪問性。 在defs元素中定義的圖形元素不會直接呈現。 你可以在你的視口的任意地方利用 <use>元素呈現這些元素。 demo<symbol>元素
symbol元素用來定義一個圖形模板對象，它可以用一個<use>元素實例化。symbol元素對圖形的作用是在同一文檔中多次使用，添加結構和語義。結構豐富的文檔可以更生動地呈現出來，類似講演稿或盲文，從而提升了可訪問性。注意，一個symbol元素本身是不呈現的。只有symbol元素的實例（亦即，一個引用了symbol的 <use>元素）才能呈現。 demo<image>元素
image元素可以包含一個完整的SVG或者柵格文件。
????可以對照CSS3的Transform屬性學習理解。
| 變換 | 描述 |
|---|---|
| translate(x, y) | 按照指定的x和y值移動用戶坐標系統。如果沒有指定y值，則假定為0 demo |
| scale(xFactor, yFactor) | 使用指定的xFactor和yFactor乘以所有的用戶坐標系統。比例值可以是小數或則負數 demo |
| scale(factor) | 和scale(factor, factor)相同 |
| rotate(angle, centerX, centerY) | 按照指定的angle旋轉用戶坐標。旋轉中心由centerX和centerY指定 demo |
| skewX(angle) | 根據指定的angle傾斜所有x坐標。從視覺上講，這會讓垂直線出現角度 demo |
| skewY(angle) | 根據指定的angle傾斜所有y坐標。從視覺上講，這會讓水平線出現角度 |
| matrix(a b c d e f) | 指定一個六個值組成的矩陣變換 |
Tip: 如何圍繞中心點縮放？
????要圍繞某個點按照給定的比例縮放對象可以這么做：
translate(-centerX * (factor - 1), -centerY * (factor - 1))scale(factor)????還可以將stroke-width的值也除以縮放系數，從而讓縮放后的輪廓保持同樣的寬度。
<!-- 縮放中心 --><circle cx="50" cy="50" r="2" style="fill: black;"/><!-- 未縮放的矩形 --><g id="box" style="stroke: black; fill: none;"> <rect x="35" y="40" width="30" height="20"/></g><use xlink:href="#box" transform="translate(-50, -50) scale(2)" style="stroke-width: 0.5;"/><use xlink:href="#box" transform="translate(-75, -75) scale(2.5)" style="stroke-width: 0.4;"/><use xlink:href="#box" transform="translate(-100, -100) scale(3)" style="stroke-width: 0.33;"/>