知識點：
-
defs標籤
SVG 允許我們定義以後需要重複使用的圖形元素。建議把所有需要再次使用的引用元素定義在defs元素裏面。這樣做可以增加SVG內容的易讀性和可訪問性。在defs元素中定義的圖形元素不會直接呈現。 你可以在你的視口的任意地方利用 <use>元素呈現這些元素。
-
use標籤
通過defs定義好被引用的標籤或標籤組後，再使用use標籤進行引用。
use元素在SVG文檔內取得目標節點，並在別的地方複製它們。它的效果等同於這些節點被深克隆到一個不可見的DOM中，然後將其粘貼到use元素的位置，很像HTML5中的克隆模板元素。因爲克隆的節點是不可見的，所以當使用CSS樣式化一個use元素以及它的隱藏的後代元素的時候，必須小心注意。隱藏的、克隆的DOM不能保證繼承CSS屬性，除非你明文設置使用CSS繼承。
出於安全原因，一些瀏覽器可能在use元素上應用同源策略，還有可能拒絕載入xlink:href屬性內的跨源URI。
-
style標籤
style元素樣式表直接在SVG內容中間嵌入。SVG的style元素的屬性與HTML中的相應的元素並無二致，功能是一樣的，只不過SVG把style封裝成了標籤形式。
重點提醒：
-
defs標籤中定義的控件，需要配置ID屬性，然後style引用時，通過#id獲取引用。還可以使用控件的名稱，比如circle定義控件屬性。
<style>#cir_red {fill: red;stroke: black;stroke-width: 10px;}</style>
-
use標籤使用xlink:href=“#id”l來進行引用
使用use標籤時，注意use的結尾標籤，不要在</use>結尾標籤之前再寫其他標籤，會顯現不出來，就是所謂的被吞了。
先看效果，這次做的效果是紅綠燈
效果被吞，估計是由於use同源策略被吞了，效果顯示不出來，不過我還有錄屏。
紅綠燈
Xi說孔方兄認證
