用SVG解決移動(dòng)端1px的技巧

今天介紹一個(gè)通過svg來實(shí)現(xiàn)移動(dòng)端1px效果的小技巧

SVG的描邊方式

通常我們在使用一些設(shè)計(jì)軟件時(shí)，描邊會(huì)有三種選擇，分別是內(nèi)描邊、居中描邊和外描邊，比如 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的實(shí)現(xiàn)

根據(jù)上面的結(jié)論，如果 stroke-width 為 1 時(shí)，那么就很輕松的被分成了兩邊各 0.5，然后把外側(cè)的部分截?cái)嗑涂梢粤诉@里直接設(shè)置 rect 的寬高都為 100%，并且 svg 默認(rèn)是超出隱藏的 （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>

可以用手機(jī)訪問或者掃描以下網(wǎng)址體驗(yàn)https://codepen.io/xboxyan/

SVG作為背景使用

以上是直接使用 svg 標(biāo)簽，實(shí)際項(xiàng)目當(dāng)然不能這樣使用了，不過可以將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'表示命名空間，暫時(shí)還不能去除，記住這層規(guī)律就可以了當(dāng)然在IE下，svg可能還需要轉(zhuǎn)義才能正常顯示，這里可以參考張鑫旭老師的這篇文章下面來看幾個(gè)案例

1、?1px分割線

這個(gè)在移動(dòng)端特別常見，這里可以這樣來實(shí)現(xiàn)，直接使用 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來畫一個(gè)自適應(yīng)的矩形，這里寬高均為 100%

div {  background: url("data:image/svg+xml,");}

3、?1px帶圓角的邊框

常規(guī)方式實(shí)現(xiàn)帶圓角的邊框就無能為力了，svg 可以很輕松的實(shí)現(xiàn)，借助rx 屬性，還有元素自身的border-radius就可以了

div {  border-radius:5px;  background: url("data:image/svg+xml,");}

總結(jié)

以上就是幾個(gè)svg實(shí)現(xiàn)邊框的小技巧了，這里是用background-image模擬的，比使用偽元素要方便的多，同時(shí)也不占據(jù)空間，算是相對完美的解決方案了~