在這裡不會詳細介紹如何繪製svg圖片，是講一個很小的bug，看圖 在這張圖中，上面帶有紋理和弧度的圖片，原本是直接切了一張png的圖片，但是由於是在app的登錄註冊的首頁，那麼這個35k的圖片就會非常影響首頁的展示效果，耗費時間，那麼怎麼做呢？ 然後就像著，把後面的紋理切成一個GIF的圖片，作為背景 ...
在這裡不會詳細介紹如何繪製svg圖片，是講一個很小的bug，看圖
在這張圖中，上面帶有紋理和弧度的圖片，原本是直接切了一張png的圖片，但是由於是在app的登錄註冊的首頁，那麼這個35k的圖片就會非常影響首頁的展示效果，耗費時間，那麼怎麼做呢？
然後就像著，把後面的紋理切成一個GIF的圖片，作為背景圖後repeat，那麼紋理就OK了。那麼那個弧度呢？也還是切圖嗎？
NO!NO!NO!
我們這個時候就可以用svg了，利用svg繪製簡單的如下的白色矩形凹槽的圖片。
<svg id="svg" class="svg-path" width="200" height="50">
<path d="M0 2 C90 20 100 20 200 2 L200 50 L0 50 Z" stroke="#fff" fill="#fff" style="stroke-width: 1px;"></path>
</svg>
這樣確實可以繪製成svg了，但是設置的寬度和高度是給定的px值，那麼如何讓其能適應不同手機屏幕的大小呢？
由於我們在項目中一直用的都是svg的圖片，那麼就自然想到也弄成svg的圖片作為背景圖。
是不是要生成svg的圖片都是需要UI設計師來生成呢？其實，這個地方是不用的，既然我們已經繪製出來了，就可以像下麵這個就好，
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 200 50"><path d="M0 2 C90 20 100 20 200 2 L200 50 L0 50 Z" stroke="#f00" fill="#f00" style="stroke-width: 1px;"/></svg>
就是說，要把先前寫的在html中寫的svg標簽的內容換成上面的樣子，同時要將裡面的空格和換行都去掉。生成xml的文件就可以在css中引用這個svg圖片。
到這個地方，還是很完美的。
但是當在iphone6下打開時，就是這樣了，
雖然width：100%，但是，左右兩邊都會有大哥1px的底色透出來，雖然瀏覽器上計算的寬度也是375px，但是就是有這個小缺陷。
然後就想，處理方法兩個：
1. width:101%;margin-left:-1px;這個樣就真是打補丁的解決方案了。但是這樣會導致頁面可以往左右滑動一點點的。
2. 就自然想到可能是繪製的svg的path的stroke-width導致的，本來是設置了1px,當設置為2px時，就沒有上述問題了。
但是，為什麼會這樣，原理也還沒明白，希望大家可以多多指教了。
