> SVG（Scalable Vector Graphics）可伸縮的向量圖形，是基于可擴展標記語言XML（Extensive Markup Language），用于描述二維矢量圖形的一種圖形格式。 瀏覽器支持：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。 官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial ## 一、SVG可以由以下方式使用 同一級目錄下有兩個文件 > test.html > test.svg test.svg ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="25" stroke="black" stroke-width="2" fill="red" /> </svg> ~~~  方式1： ~~~ <embed src="test.svg" type="image/svg+xml" /> ~~~ 方式2： ~~~ <img src="test.svg" alt=""> ~~~ 方式3： ~~~ <object data="test.svg" type="image/svg+xml"></object> ~~~ 方式4： ~~~ <iframe src="test.svg"></iframe> ~~~ 方式5： ~~~ <a href="test.svg">svg</a> ~~~ ## 二、SVG的一些預定義形狀 1、矩形rectangle（長、寬，這是使用了內聯style來定義svg樣式） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="100" height="60" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  引申圓角矩形 ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect rx="20" ry="20" width="100" height="60" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  2、圓形circle（上面已有示例） 3、橢圓ellipse（圓心點、x軸半徑、y軸半徑） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="100" cy="100" rx="60" ry="30" style="fill:yellow;stroke:purple;stroke-width:2"/> </svg> ~~~  4、直線line（點1、點2） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2"/> </svg> ~~~  5、多邊形polygon（多點空格隔開） ~~~ <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> ~~~  6、折線polyline（多點空格隔開） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" /> </svg> ~~~  7、路徑path（d：draw/define） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M50 0 L50 50 L10 50 Z" /> </svg> ~~~  路徑參數 | 參數 | 描述 | | --- | --- | | M | moveto | | L | lineto | | H | horizontal lineto | | V | vertical lineto | | C | curveto | | S | smooth curveto | | Q | quadratic Bézier curve | | T | smooth quadratic Bézier curveto | | A | elliptical Arc | | Z | closepath | 8、文本text ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="10" y="50" fill="#f00">Hello World!</text> </svg> ~~~  ## 三、viewport、viewbox、preserveAspectRatio 1、viewport也就是svg的寬高 如果不設置width、height，瀏覽器也會自帶默認寬高  如果寬高小于形狀的寬高，那么就只能開到svg 可視寬高viewport的內容  2、viewbox（x y width height）這個有點像淘寶圖片放大器，下面是放大1.5倍的效果(120 / 80 = 1.5) 這個算法不是固定的，原則就是先按比例大的來算 ~~~ <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewbox="0 0 80 60" version="1.1"> <rect width="40" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  viewbox的寬高越大實際效果越小，成反比的。 再來個縮小居中效果（120 / 240 = 0.5） ~~~ <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewbox="0 0 240 35" version="1.1"> <rect width="40" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  viewbox 中的4個參數都太隨性了，一時不好講清楚，這個是多試試，然后就是在項目中要謹慎使用 3、preserveAspectRatio(xMidyMid meet) ~~~ <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewbox="0 0 120 60" preserveAspectRatio="xMidYMin slice" version="1.1" style="border: 1px solid #f00;"> <rect width="40" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  參數1 | 參數 | 描述 | | --- | --- | | xMin | viewport和viewBox左邊對齊 | | xMid | viewport和viewBox x軸中心對齊 | | xMax | viewport和viewBox右邊對齊 | | YMin | viewport和viewBox上邊緣對齊。注意Y是大寫。 | | YMid | viewport和viewBox y軸中心點對齊。注意Y是大寫。 | | YMax | viewport和viewBox下邊緣對齊。注意Y是大寫。 | 參數2 | 參數 | 描述 | | --- | --- | | meet | 保持縱橫比縮放viewBox適應viewport | | slice | 保持縱橫比同時比例小的方向放大填滿viewport | | 無 | 扭曲縱橫比以充分適應viewport | 這三個viewport最好理解，viewbox是與viewport配合使用的，而preserveAspectRatio又是與viewbox配合使用的。但viewbox和preserveAspectRatio不好理解，需要大量的在項目中使用，才能理解透徹，這里只是給個引子。。