在前端開發的過程中，為了界面的美觀，會用到很多好看但無法純利用HTML和CSS實現的圖形（對於大佬們這就不算事了，但對於我這個剛入行的后生就難了），如下面的幾個圖形，如果不用美工妹妹的PS圖片，我個人覺得是比較難實現的：
以上的圖形利用純HTML和CSS是比較難實現的，幸好前段時間剛好看到有篇關於SVG的實例講解，學習了一下SVG，下面是我的學習心得（這是我第一次寫博客，寫的不好多多見諒）
1.什么是SVG?(這里引用w3school的定義)
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用來定義用於網絡的基於矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
- SVG 是萬維網聯盟的標准
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標准是一個整體
也就是說SVG是互聯網標准中的可伸縮適量圖形的XML定義方法，很多動畫和圖形都可以利用SVG去實現，HTML5結合SVG可以做出很棒的特效菜單、頁面等（良心推薦HTML5 Tricks網站，這里有很多特效實例）
2.我的學習總結
先給大家看幾個我的學習成果截圖（從HTML5 Tricks看到的,純代碼實現）：
以圖形全部是用SVG實現的，那么這是怎么實現的呢？這里直接附上唐老鴨的實現代碼（由於代碼太長，去掉了唐老鴨的“部分”，上面第二張圖的那種效果）
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 SVG 繪制唐老鴨卡通形象DEMO演示</title> <style> *{ margin:0; padding:0;} .box{background:#fff; margin:10px auto; width:900px; height:600px;} </style> </head> <body> <div class="box"> <svg xmlns="http://www.w3.org/2000/svg" version="1" width="900" height="600" > <path d="M130 375 C130 375 113 388 91 386 M111 384 C111 384 87 320 18 412 C18 412 0 440 51 475 C51 475 54 476 80 480 C80 480 111 504 118 466 C118 466 188 420 118 421 C118 421 94 425 110 410 M69 404 C69 404 81 423 153 393 L153 393 134 369 " style="fill:#f89b00; stroke:#b62202; stroke-width:3"></path> <path d="M51 420 C51 420 78 417 96 436 M36 431 C36 431 64 426 93 440 " style="fill:#f89b00; stroke:#b62202; stroke-width:2" ></path> <path d="M304 460 C304 460 285 429 247 405 L247 405 274 387 C274 387 304 402 322 421 C322 421 330 398 330 376 C330 376 330 364 345 363 C350 363 364 330 401 352 C401 352 419 351 424 362 C424 362 420 460 346 486 C346 486 303 510 305 460 M304 460 L304 460 322 421 " style="fill:#f89b00; stroke:#b62202; stroke-width:3"></path> <ellipse cx="-138" cy="-216" rx="13" ry="30" style="fill:#e6f5fa; stroke:#7e7e7b; stroke-width:2; transform:rotate(140deg);-webkit-transform:rotate(140deg);"></ellipse> <ellipse cx="-115" cy="-235" rx="9" ry="20" style="fill:#000;transform:rotate(135deg);-webkit-transform:rotate(135deg)"></ellipse> <ellipse cx="-59" cy="-220" rx="22" ry="50" style="fill:#e6f5fa; stroke:#7e7e7b; stroke-width:2;transform:rotate(135deg);-webkit-transform:rotate(135deg)"></ellipse> <ellipse cx="-40" cy="-233" rx="15" ry="27" style="fill:#000; transform:rotate(132deg);-webkit-transform:rotate(132deg)"></ellipse> </svg> </div> <div style="text-align:center;clear:both;"> </div> </body> </html>
像這代碼應該很容易看懂，解釋一下：一個圖形要包括在<svg>圖形的詳細定義</svg>中，這樣可以定義整個圖形的一些屬性（像寬高），細節部分利用SVG的標簽“畫”各種形狀並用CSS渲染，SVG標簽主要有：
- SVG 矩形 <rect> 用來創建矩形，以及矩形的變種
- SVG 圓形 <circle> 用來創建一個圓
- SVG 橢圓 <ellipse> 用來創建橢圓
- SVG 線條 <line> 用來創建線條
- SVG 多邊形 <polyline> 用來創建含有不少於三個邊的圖形
- SVG 折線 <polygon> 來創建僅包含直線的形狀
- SVG 路徑 <path> 用來定義路徑
如這句
<path d="M250 150 L150 350 L350 350 Z" />
定義了一條路徑，它開始於位置（M=moveto） 250 150，直線到達位置（L=lineto） 150 350，然后從那里開始直線到 350 350，最后在 250 150 關閉路徑（Z=closrpath）表示到達。
那右邊的那種圓形菜單（參考jQuery之家，Demo）的實現也是同樣的方式，只不過考慮到菜單項的經常性變動，這里元素用到了<symbol>元素，<symbol>元素用於放置你的自定義圖標，<symbol>元素的數量由你設置的菜單項的數量決定。
每一個<symbol>都用來包裝一個圖標。每一個實際菜單項都包裹在一個<a>元素中，里面包含一個<path>元素和一個<use>元素，<use>元素通過xlink:href屬性指向前面的symbol，也就是說在添加了SVG圖標代碼之后，要使用<use>元素來指向對應的symbol。
這就是整體的圓形菜單SVG元素之間的關系（詳細的實現過程）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圓形菜單</title> <style> body{ width:100%; height:100% } #menu { display: block; margin: 0 auto; overflow: visible; } .item .sector { transition: all .1s linear; fill: #fff; stroke: #eee; stroke-width: 1; } .item:hover .sector { fill: #9A2764; } .menu-trigger { fill: #360036; pointer-events: auto; } .menu-trigger:hover { cursor: pointer; } use { fill: #360036; } .item:hover use { fill: #fff; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 900 900" id="menu"> <g id="symbolsContainer"> <symbol class="icon icon-" id="icon-1" viewBox="0 0 40 40"> <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path> </symbol> <symbol class="icon icon-" id="icon-2" viewBox="0 0 40 40"> <path d="M34 4h-2v-2c0-1.1-0.9-2-2-2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h2v2c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2zM4 6v20h-1.996c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993c0.001 0.001 0.003 0.002 0.004 0.004v1.996h-24c-1.1 0-2 0.9-2 2v0zM34 29.996c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993c0.001 0.001 0.003 0.002 0.004 0.004v23.993z"></path> <path d="M30 11c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path> <path d="M32 28h-24v-4l7-12 8 10h2l7-6z"></path> </symbol> <symbol class="icon icon-" id="icon-3" viewBox="0 0 40 40"> <path d="M15 4c-1.583 0-3.112 0.248-4.543 0.738-1.341 0.459-2.535 1.107-3.547 1.926-1.876 1.518-2.91 3.463-2.91 5.474 0 1.125 0.315 2.217 0.935 3.247 0.646 1.073 1.622 2.056 2.821 2.842 0.951 0.624 1.592 1.623 1.761 2.748 0.028 0.187 0.051 0.375 0.068 0.564 0.085-0.079 0.169-0.16 0.254-0.244 0.754-0.751 1.771-1.166 2.823-1.166 0.167 0 0.335 0.011 0.503 0.032 0.605 0.077 1.223 0.116 1.836 0.116 1.583 0 3.112-0.248 4.543-0.738 1.341-0.459 2.535-1.107 3.547-1.926 1.876-1.518 2.91-3.463 2.91-5.474s-1.033-3.956-2.91-5.474c-1.012-0.819-2.206-1.467-3.547-1.926-1.431-0.49-2.96-0.738-4.543-0.738zM15 0v0c8.284 0 15 5.435 15 12.139s-6.716 12.139-15 12.139c-0.796 0-1.576-0.051-2.339-0.147-3.222 3.209-6.943 3.785-10.661 3.869v-0.785c2.008-0.98 3.625-2.765 3.625-4.804 0-0.285-0.022-0.564-0.063-0.837-3.392-2.225-5.562-5.625-5.562-9.434 0-6.704 6.716-12.139 15-12.139zM31.125 27.209c0 1.748 1.135 3.278 2.875 4.118v0.673c-3.223-0.072-6.181-0.566-8.973-3.316-0.661 0.083-1.337 0.126-2.027 0.126-2.983 0-5.732-0.805-7.925-2.157 4.521-0.016 8.789-1.464 12.026-4.084 1.631-1.32 2.919-2.87 3.825-4.605 0.961-1.84 1.449-3.799 1.449-5.825 0-0.326-0.014-0.651-0.039-0.974 2.268 1.873 3.664 4.426 3.664 7.24 0 3.265-1.88 6.179-4.82 8.086-0.036 0.234-0.055 0.474-0.055 0.718z"></path> </symbol> <symbol class="icon icon-" id="icon-4" viewBox="0 0 40 40"> <path d="M16 4c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zM16 29.25c-6.213 0-11.25-5.037-11.25-11.25s5.037-11.25 11.25-11.25c6.213 0 11.25 5.037 11.25 11.25s-5.037 11.25-11.25 11.25zM29.212 8.974c0.501-0.877 0.788-1.892 0.788-2.974 0-3.314-2.686-6-6-6-1.932 0-3.65 0.913-4.747 2.331 4.121 0.851 7.663 3.287 9.96 6.643v0zM12.748 2.331c-1.097-1.418-2.816-2.331-4.748-2.331-3.314 0-6 2.686-6 6 0 1.082 0.287 2.098 0.788 2.974 2.297-3.356 5.838-5.792 9.96-6.643z"></path> <path d="M16 18v-8h-2v10h8v-2z"></path> </symbol> <symbol class="icon icon-" id="icon-5" viewBox="0 0 40 40"> <path d="M26 30l6-16h-26l-6 16zM4 12l-4 18v-26h9l4 4h13v4z"></path> </symbol> <symbol class="icon icon-" id="icon-5" viewBox="0 0 40 40"> <path d="M28 4v26h-21c-1.657 0-3-1.343-3-3s1.343-3 3-3h19v-24h-20c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h24v-28h-2z"></path> <path d="M7.002 26v0c-0.001 0-0.001 0-0.002 0-0.552 0-1 0.448-1 1s0.448 1 1 1c0.001 0 0.001-0 0.002-0v0h18.997v-2h-18.997z"></path> </symbol> <symbol class="icon icon-" id="icon-6" viewBox="0 0 40 40"> <path d="M11.366 22.564l1.291-1.807-1.414-1.414-1.807 1.291c-0.335-0.187-0.694-0.337-1.071-0.444l-0.365-2.19h-2l-0.365 2.19c-0.377 0.107-0.736 0.256-1.071 0.444l-1.807-1.291-1.414 1.414 1.291 1.807c-0.187 0.335-0.337 0.694-0.443 1.071l-2.19 0.365v2l2.19 0.365c0.107 0.377 0.256 0.736 0.444 1.071l-1.291 1.807 1.414 1.414 1.807-1.291c0.335 0.187 0.694 0.337 1.071 0.444l0.365 2.19h2l0.365-2.19c0.377-0.107 0.736-0.256 1.071-0.444l1.807 1.291 1.414-1.414-1.291-1.807c0.187-0.335 0.337-0.694 0.444-1.071l2.19-0.365v-2l-2.19-0.365c-0.107-0.377-0.256-0.736-0.444-1.071zM7 27c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM32 12v-2l-2.106-0.383c-0.039-0.251-0.088-0.499-0.148-0.743l1.799-1.159-0.765-1.848-2.092 0.452c-0.132-0.216-0.273-0.426-0.422-0.629l1.219-1.761-1.414-1.414-1.761 1.219c-0.203-0.149-0.413-0.29-0.629-0.422l0.452-2.092-1.848-0.765-1.159 1.799c-0.244-0.059-0.492-0.109-0.743-0.148l-0.383-2.106h-2l-0.383 2.106c-0.251 0.039-0.499 0.088-0.743 0.148l-1.159-1.799-1.848 0.765 0.452 2.092c-0.216 0.132-0.426 0.273-0.629 0.422l-1.761-1.219-1.414 1.414 1.219 1.761c-0.149 0.203-0.29 0.413-0.422 0.629l-2.092-0.452-0.765 1.848 1.799 1.159c-0.059 0.244-0.109 0.492-0.148 0.743l-2.106 0.383v2l2.106 0.383c0.039 0.251 0.088 0.499 0.148 0.743l-1.799 1.159 0.765 1.848 2.092-0.452c0.132 0.216 0.273 0.426 0.422 0.629l-1.219 1.761 1.414 1.414 1.761-1.219c0.203 0.149 0.413 0.29 0.629 0.422l-0.452 2.092 1.848 0.765 1.159-1.799c0.244 0.059 0.492 0.109 0.743 0.148l0.383 2.106h2l0.383-2.106c0.251-0.039 0.499-0.088 0.743-0.148l1.159 1.799 1.848-0.765-0.452-2.092c0.216-0.132 0.426-0.273 0.629-0.422l1.761 1.219 1.414-1.414-1.219-1.761c0.149-0.203 0.29-0.413 0.422-0.629l2.092 0.452 0.765-1.848-1.799-1.159c0.059-0.244 0.109-0.492 0.148-0.743l2.106-0.383zM21 15.35c-2.402 0-4.35-1.948-4.35-4.35s1.948-4.35 4.35-4.35 4.35 1.948 4.35 4.35c0 2.402-1.948 4.35-4.35 4.35z"></path> </symbol> <symbol class="icon icon-" id="icon-7" viewBox="0 0 40 40"> <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM3 16c0-7.18 5.82-13 13-13 3.424 0 6.538 1.325 8.86 3.488l-12.86 5.512-5.512 12.86c-2.164-2.322-3.488-5.436-3.488-8.86zM18.286 18.286l-8.003 3.43 3.43-8.003 4.573 4.573zM16 29c-3.424 0-6.539-1.325-8.86-3.488l12.86-5.512 5.512-12.86c2.164 2.322 3.488 5.436 3.488 8.86 0 7.18-5.82 13-13 13z"></path> </symbol> <symbol class="icon icon-" id="icon-8" viewBox="0 0 40 40"> <path d="M30.478 18.061c0.088-0.65 0.138-1.311 0.138-1.983 0-8.072-6.579-14.617-14.694-14.617-0.806 0-1.597 0.066-2.367 0.192-1.38-0.899-3.021-1.423-4.788-1.423-4.845 0-8.768 3.925-8.768 8.769 0 1.762 0.519 3.4 1.412 4.774-0.12 0.751-0.182 1.52-0.182 2.304 0 8.073 6.576 14.618 14.693 14.618 0.916 0 1.808-0.089 2.675-0.246 1.347 0.836 2.933 1.322 4.634 1.322 4.844 0 8.768-3.926 8.768-8.77-0-1.831-0.56-3.533-1.522-4.94zM17.296 26.85c-4.669 0.243-6.854-0.79-8.856-2.668-2.235-2.098-1.337-4.491 0.484-4.613 1.82-0.122 2.913 2.063 3.884 2.671 0.97 0.605 4.662 1.985 6.612-0.244 2.123-2.427-1.412-3.683-4.004-4.063-3.7-0.548-8.372-2.55-8.008-6.494 0.364-3.942 3.349-5.963 6.491-6.248 4.005-0.364 6.612 0.607 8.674 2.366 2.384 2.033 1.094 4.306-0.425 4.489-1.513 0.182-3.213-3.344-6.549-3.397-3.439-0.054-5.764 3.579-1.518 4.612 4.248 1.032 8.797 1.455 10.435 5.339 1.639 3.884-2.547 8.008-7.22 8.251z"></path> </symbol> </g> <g id="itemsContainer"> <a class="item" id="item-1" xlink:href="" xlink:title="" transform="rotate(0 250 250)" data-svg-origin="250 250" style=""> <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path> <use xlink:href="#icon-1" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use> </a> <a class="item" id="item-2" xlink:href="" xlink:title="" transform="rotate(-45 250 250)" data-svg-origin="250 250" style=""> <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path> <use xlink:href="#icon-2" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use> </a> <a class="item" id="item-3" xlink:href="" xlink:title="" transform="rotate(-90 250 250)" data-svg-origin="250 250" style=""> <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path> <use xlink:href="#icon-3" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use> </a> <a class="item" id="item-4" xlink:href="" xlink:title="" transform="rotate(-135 250 250)" data-svg-origin="250 250" style=""> <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path> <use xlink:href="#icon-4" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use> </a> <a class="item" id="item-5" xlink:href="" xlink:title="" transform="rotate(-180 250 250)" data-svg-origin="250 250" style=""> <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path> <use xlink:href="#icon-5" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use> </a> <a class="item" id="item-6" xlink:href="" xlink:title="" transform="rotate(-225 250 250)" data-svg-origin="250 250" style=""> <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path> <use xlink:href="#icon-6" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use> </a> <a class="item" id="item-7" xlink:href="" xlink:title="" transform="rotate(-270 250 250)" data-svg-origin="250 250" style=""> <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path> <use xlink:href="#icon-7" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use> </a> <a class="item" id="item-8" xlink:href="" xlink:title="" transform="rotate(-315 250 250)" data-svg-origin="250 250" style=""> <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path> <use xlink:href="#icon-8" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use> </a> </g> <g id="trigger" class="trigger menu-trigger"> <circle cx="250" cy="240" r="30"></circle> <text id="label" text-anchor="middle" x="250" y="260" fill="#fff" font-size="2.5em">+</text> </g> </svg> <script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> <script> var svg = document.getElementById('menu'), itemsContainer = document.getElementById('itemsContainer'), trigger = document.getElementById('trigger'), label = trigger.querySelectorAll('#label')[0], items = Snap(itemsContainer), originalTransform = itemsContainer.getAttribute('transform'), open = false; items.animate({ transform: 's0,0,250,250', opacity: 0 }, 0.005); svg.style.pointerEvents = 'none'; trigger.addEventListener('click', toggleMenu, false); function toggleMenu(event) { if (!event) var event = window.event; event.stopPropagation(); open = !open; if (!open) { items.animate({ transform: 's0,0,250,250', opacity: 0 }, 400, mina.backin); label.innerHTML = '+'; svg.style.pointerEvents = 'none'; } else { items.animate({ transform: originalTransform, opacity: 1 }, 1000, mina.elastic); label.innerHTML = '-'; svg.style.pointerEvents = 'auto'; } } svg.onclick = function(e) { e.stopPropagation(); }; document.onclick = function() { open = false; items.animate({ transform: 's0,0,250,250', opacity: 0 }, 400, mina.backin); label.innerHTML = '+'; svg.style.pointerEvents = 'none'; }; </script> </body> </html>
3.SVG的優勢
與其他圖像格式相比，使用 SVG 的優勢在於：
- SVG 可被非常多的工具讀取和修改（比如記事本）
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
- SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
- SVG 可以與 Java 技術一起運行
- SVG 是開放的標准
- SVG 文件是純粹的 XML
SVG 的主要競爭者是 Flash。
與 Flash 相比，SVG 最大的優勢是與其他標准（比如 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術。
這樣看來其實SVG的寫法也是很簡單的。SVG還有兩大特點功能就是SVG濾鏡和SVG漸變，時間有限（周末除了寫了博客，還要鍛煉身體出去浪一波）這里就不寫了。
希望我的學習總結能對你有所幫助！
2017-07-22 18:36:39