PS：補一下SVG_6，本來6是另一個功能介紹，素材沒整理好，算是錯過，後面再介紹。
知識點：
一，transform，這不是控件，只是一個屬性，但功能強大，支持位移、縮放、旋轉。
二，animateTransform標籤，這是一個控件。
使用時，最好用<g>標籤單獨控制想要是用動畫的控件，否則會使整個畫布都動畫起來。
一般用法：
旋轉屬性就像：rotation(theta, x, y)，theta是一個角度，x和y是絕對座標。
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="60 100 400" to="360 100 60" repeatCount="indefinite" />
上乾貨
在一個標籤中，比如在circle中，transform有多種玩法,不管是位移還是縮放，都是針對左上角的0,0座標而言的。
-
位移：transform="translate(200,20)" 在translate寫位移的座標即可。
-
縮放：transform="scale(0.5)" 在scale寫縮放倍數即可。
-
旋轉：transform="rotate(359)"
如果既要縮放，還要旋轉，可以這麼寫：
transform="rotate(359)scale(0.5)"；
如果想基於原圖形旋轉，記得添加這兩個屬性：
style="transform-origin:center;transform-box:fill-box"
否則，旋轉是以左上角的0,0做旋轉的。
先看效果圖：
PS：文字是動態轉圈的，想看效果可以去公衆號：Xi說SVG
由於需要放到公衆號中展示，所以微調了viewBox。
上代碼
<!--Scalable Vector Graphic--><svg xmlns="http://www.w3.org/2000/svg"width="500px"height="500px"viewBox="0 0 1000 1000"><!-- 在一個標籤中，比如在circle中，transform有多種玩法,不管是位移還是縮放，都是針對左上角的0,0座標而言的。位移：transform="translate(200,20)" 在translate寫位移的座標即可。縮放：transform="scale(0.5)" 在scale寫縮放倍數即可。旋轉：transform="rotate(359)"如果既要縮放，還要旋轉，可以這麼寫：transform="rotate(359)scale(0.5)"；如果想基於原圖形旋轉，記得添加這兩個屬性，style="transform-origin:center;transform-box:fill-box"否則，旋轉是以左上角的0,0做旋轉的。--><g stroke="black" stroke-width="10" fill="none"><!-- 本圓--><circle cx="480" cy="280" r="250"></circle><!-- 位移後的圓--><circle cx="500" cy="120" r="125"transform="translate(200,20)" stroke="red"></circle><!-- 縮放後的圓，默認以左上角0,0座標--><circle cx="480" cy="280" r="250"transform="scale(0.5)" stroke="blue"></circle><!-- 縮放後的圓，以圖形中心縮放想要圖像中心縮放，需要加一個style，如下：style="transform-origin:center;transform-box:fill-box"--><circle cx="480" cy="280" r="250"style="transform-origin:center;transform-box:fill-box"transform="scale(0.5)" stroke="greenyellow"></circle><!-- 鼻子--><!-- 左鼻子--><g ><ellipse cx="400" cy="280" rx="30" ry="60" transform="rotate(359)"></ellipse><ellipse cx="400" cy="280" rx="5" ry="10"></ellipse></g><!-- 右鼻子--><g ><ellipse cx="560" cy="280" rx="30" ry="60" transform="rotate(359)"></ellipse><ellipse cx="560" cy="280" rx="5" ry="10"></ellipse></g><!-- 尾巴--><g stroke="black" stroke-width="10"><!-- 尾巴根--><path d="M700 400A170 170 0 0 0 820 302"></path><!-- 尾巴繞圈--><circle r="30" cx="800" cy="280"></circle><!-- 尾巴尾--><path d="M820 302A170 170 0 0 0 900 200" stroke-width="6"></path></g></g><!-- 翔--><image width="300" height="300" transform="translate(0,600)" stroke="black" href="https://mmbiz.qpic.cn/mmbiz_png/kLwGw8KricxMwnugI0S5b0jSYH58sibLPO6RNJuP8fGSBwibbag1VTiast6j8fiaHnHbVhDrsmIvPPVS4vkFnJiciaNhg/0?wx_fmt=png"></image><g><!-- 蒼蠅--><image width="50" height="50" transform="translate(0,700)rotation" stroke="black" href="https://mmbiz.qpic.cn/mmbiz_png/kLwGw8KricxMwnugI0S5b0jSYH58sibLPOxPjibm2wKC60eFZKzibuacJmyIEMTWnPOJBJh9amrSfVehjibyZaXzRWQ/0?wx_fmt=png"></image><animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="60 100 400" to="360 100 60" repeatCount="indefinite" /></g></svg>
Xi說孔方兄官方認證
Xi說孔方兄出品