webview 中 svg的坑

在这里不会详细介绍如何绘制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时，就没有上述问题了。
但是，为什么会这样，原理也还没明白，希望大家可以多多指教了。