其他分享
首页 > 其他分享> > 使用svg描边来实现移动端1px

使用svg描边来实现移动端1px

作者:互联网

今天介绍一个通过svg来实现移动端1px效果的小技巧

 

svg的描边方式

通常我们在使用一些设计软件时,描边会有三种选择,分别是内描边居中描边外描边,比如 photoshop

那么,svg 中的描边是哪种方式呢?

答案是居中描边,并且无法更改,如下

<svg height="100px" viewBox="0 0 100 100">
    <rect x='10' y='10' width='40' height='40' fill='none' stroke-width='10' stroke='red' />
</svg>

可以看到,rect 的描边是居中的,两边各是 5

 

0.5px的实现

根据上面的结论,如果 stroke-width 为 1 时,那么就很轻松的被分成了两边各 0.5,然后把外侧的部分截断就可以了

这里直接设置 rect 的宽高都为 100%,并且 svg 默认是超出隐藏的 (overflow:hidden),如下

<svg height="100px" viewBox="0 0 100 100">
    <rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red' />
</svg>

这里对比一下1px的效果

<div style="box-sizing: border-box; width:100px;height:100px;border:1px solid red;"></div>

可以用手机访问或者扫描以下网址体验https://codepen.io/xboxyan/

 

svg作为背景使用

以上是直接使用 svg 标签,实际项目当然不能这样使用了,不过可以将svg 作为背景图片来使用,例如

div {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red' /></svg>");
}

很简单,在 svg 前面添加一段 data:image/svg+xml, 表示这是一张 svg格式的图片,和 base64 的写法比较类似,后面 svg 的属性xmlns='http://www.w3.org/2000/svg'表示命名空间,暂时还不能去除,记住这层规律就可以了

当然在IE下,svg可能还需要转义才能正常显示,这里可以参考张鑫旭老师的这篇文章

下面来看几个案例

https://www.houdianzi.com/cdlogo/ 成都logo设计

1. 1px分割线

这个在移动端特别常见,这里可以这样来实现,直接使用 line 画一条底部的线

p {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='red' /></svg>");
}

 

2. 1px边框

和分割线类似,只是用rect来画一个自适应的矩形,这里宽高均为 100%

div {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke='red' /></svg>");
}

 

3. 1px带圆角的边框

常规方式实现带圆角的边框就无能为力了,svg 可以很轻松的实现,借助rx 属性,还有元素自身的border-radius就可以了

div {
  border-radius:5px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' rx='5' fill='none' stroke='red' /></svg>");
}

 

总结

以上就是几个svg实现边框的小技巧了,这里是用background-image模拟的,比使用伪元素要方便的多,同时也不占据空间,算是相对完美的解决方案了~

标签:xml,描边,svg,image,1px,background
来源: https://www.cnblogs.com/moluy/p/14974028.html