你的位置:首页 > 网页设计

[网页设计]webview 中 svg的坑


在这里不会详细介绍如何绘制svg图片,是讲一个很小的bug,看图

   

在这张图中,上面带有纹理和弧度的图片,原本是直接切了一张png的图片,但是由于是在app的登录注册的首页,那么这个35k的图片就会非常影响首页的展示效果,耗费时间,那么怎么做呢?

然后就像着,把后面的纹理切成一个GIF的图片,作为背景图后repeat,那么纹理就OK了。那么那个弧度呢?也还是切图吗?

NO!NO!NO!

我们这个时候就可以用svg了,利用svg绘制简单的如下的白色矩形凹槽的图片。

<svg id="svg" width="200" height="50">
<path d="M0 2 C90 20 100 20 200 2 L200 50 L0 50 Z" stroke="#fff" fill="#fff" ></path>
</svg>

这样确实可以绘制成svg了,但是设置的宽度和高度是给定的px值,那么如何让其能适应不同手机屏幕的大小呢?
由于我们在项目中一直用的都是svg的图片,那么就自然想到也弄成svg的图片作为背景图。
是不是要生成svg的图片都是需要UI设计师来生成呢?其实,这个地方是不用的,既然我们已经绘制出来了,就可以像下面这个就好,
<svg
就是说,要把先前写的在html中写的svg标签的内容换成上面的样子,同时要将里面的空格和换行都去掉。生成
到这个地方,还是很完美的。
但是当在iphone6下打开时,就是这样了,

虽然width:100%,但是,左右两边都会有大哥1px的底色透出来,虽然浏览器上计算的宽度也是375px,但是就是有这个小缺陷。
然后就想,处理方法两个:
1. width:101%;margin-left:-1px;这个样就真是打补丁的解决方案了。但是这样会导致页面可以往左右滑动一点点的。
2. 就自然想到可能是绘制的svg的path的stroke-width导致的,本来是设置了1px,当设置为2px时,就没有上述问题了。
但是,为什么会这样,原理也还没明白,希望大家可以多多指教了。