CSS & SVG 繪製寫作網格線的3種方式

XboxYan 發表於 2023-01-10
CSS
歡迎關注我的公眾號:前端偵探

最近有同事問我這樣一個問題:需要繪製一個自適應文字的寫作網格線,設計稿是這樣的

image.png

其實就是一行行虛線,要求如下

  1. 虛線的縱向間隔要跟隨行高自適應,確保文字在每一欄虛線上
  2. 虛線後面的背景是動態的,可以是純色,可以是漸變,也可以是圖片

繪製這樣的虛線,看似容易,其實暗藏玄機,下面一起看看有哪些實現方式吧

一、純色背景下的虛線

首先來看這種簡單情況,大可以透過兩層漸變覆蓋的方式實現。

假設文字行高是2,先繪製水平方向的

body{
  background: linear-gradient(#666 1px,transparent 0) 0 -1px/100% 2em;
}

注意,這裡的背景尺寸是100% 2em,高度跟隨文字行高,所以高度是2em,效果如下

image.png

然後,繪製縱向的實線,蓋在上面,為了區分,先用一個淺紅色來代替

body{
  background: linear-gradient(to right, #ffdbdb 4px,transparent 0) 0 -4px/8px 100%,  /*垂直*/
    linear-gradient(#666 1px,transparent 0) 0 -1px/100% 2em; /*水平*/
}

這樣就繪製了一個垂直平鋪,間隔為4px的虛線,效果如下

image.png

應該比較好理解吧,就是兩個方向上的漸變疊加

然後,將這個紅色改成和底色相同的顏色就行了,比如這裡是白色

body{
  background: linear-gradient(to right, #fff 4px,transparent 0) 0 -4px/8px 100%,  /*垂直*/
    linear-gradient(#666 1px,transparent 0) 0 -1px/100% 2em; /*水平*/
}

這樣就實現了純色下的虛線網格,效果如下

image.png

二、漸變背景下的虛線

如果不是純色,而是漸變的呢?假設有一個這樣的背景

image.png

如果直接用前面的方式,可能就變成了這樣

image.png

白色直接把背後的漸變背景也覆蓋了。

那如何解決這個問題呢?

像這種疊加混合的情況一般都會想到混合模式,沒錯,這裡也可以透過混合模式簡單處理。要用混合模式,必須要讓這兩層背景處於不同的容器中,然後使用mix-blend-mode

html{
  background: linear-gradient(45deg, #f5ffc0, #fff);
}

body{
  font-size: 20px;
  background: linear-gradient(to right, #fff 4px,transparent 0) 0 -4px/8px 100%, linear-gradient(#666 1px,transparent 0) 0 -1px/100% 2em;
  mix-blend-mode: darken;
}

這裡使用了混合模式中的darken,這種模式可以去除白色部分,保留其他,效果如下

Kapture 2023-01-07 at 13.34.39.gif

完整程式碼可以檢視以下任意連結

三、透過錐形漸變繪製

下面再介紹一個比較硬核的繪製方式:錐形漸變(conic-gradient)

為什麼說比較硬核呢?因為這種方式繪製出來的圖形就是完完全全的虛線,也沒有混合模式的諸多限制。

首先我們從圖形上分析,找到最小的重複單元,如下

image.png

找到了,就是這個,其實就是這個位於左上角的矩形,那麼,如何透過錐形漸變來繪製呢?

注意: 有同學可能會奇怪,這樣一個矩形線性漸變不是可以很輕鬆的實現嗎?確實可以,但是隻能實現一個,無法平鋪

看著好像不沾邊,下面帶你一步步演變

首先是最原始的語法

div{
  background: conic-gradient(#666, transparent);
}

這是一個從透明到灰色的漸變,效果如下

image.png

這才是錐形漸變的樣子!

然後,我們可以將漸變的分界線調整一下

div{
  background: conic-gradient(#666 90deg, transparent 0deg);
}

這樣就變成了一個邊界分明的正方形

image.png

然後改變起始角度,透過from關鍵詞

div{
  background: conic-gradient(from 270deg, #666 90deg, transparent 0deg);
}

這樣起始角度就會從270deg的地方開始,如下

image.png

接著,改變中心點的位置,預設是水平垂直居中的,我們要改到左上角,需要用到at關鍵詞

div{
  background: conic-gradient(from 270deg at 40px 10px, #666 90deg, transparent 0deg);
}

這裡改成了左上角40px,10px的地方,如下

image.png

最後,改變背景的尺寸,預設是寬高100%的,我們要改成實際需要的大小

div{
  background: conic-gradient(from 270deg at 40px 10px, #666 90deg, transparent 0deg);
  background-size: 80px 90px;
}

這樣就會自動平鋪展開,如下

image.png

原理就是這樣,實際上的虛線比較小,應該是4px 1px,所以實際應用應該是這樣

div{
  background: conic-gradient(from 270deg at 4px 1px, #666 90deg, transparent 0deg);
  background-size: 8px 2em;
}

效果如下

image.png

完整程式碼可以檢視以下任意連結

四、動態SVG背景繪製

最後再來介紹一個實現起來最容易的方式,就是“切圖”。

但是,這種“切圖”不同於一般的切圖,因為這個尺寸是動態的,要跟隨文字的行高變化而變化,所以需要採取一定的“手段”。

首先在繪圖軟體中繪製這樣一個圖形,例如下面是figma中繪製的

image.png

外面的寬高無所謂,隨便設定。可以得到這樣一段SVG

<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10" fill="none"/>
  <rect width="5" height="1" fill="#D9D9D9"/>
</svg>

然後,我們將這個svg轉換成內聯 CSS格式

推薦張鑫旭老師的線上轉換工具:SVG線上壓縮合並工具

直接用到背景上

body{
  font-size: 20px;
  background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h10v10H0z'/%3E%3Cpath fill='%23D9D9D9' d='M0 0h5v1H0z'/%3E%3C/svg%3E") 0 0/10px 2em;
}

效果如下

image.png

為啥這裡的虛線都錯位了呢?

這也是 SVG不同於常規圖片的一點,在外部背景尺寸超過viewbox尺寸後,SVG 畫布會整體縮放,但是具體的元素並不會,具體表現是這樣的

image.png

那麼,有沒有辦法在畫布縮放的時候,裡面的元素仍然位於左上角呢?就像這樣

image.png

當然也是可以的,只需要將viewbox改為0 0 100% 100%就行了,或者乾脆刪除(預設就是100%),SVG的寬高也要改成100%,如下

<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10" fill="none"/>
  <rect width="5" height="1" fill="#D9D9D9"/>
</svg>

這樣一來,不管背景尺寸如何變化,內部的虛線位置都不受影響,效果如下

image.png

完整程式碼可以檢視以下任意連結

除了上面這種方式,還可以換一種思路,讓預設的虛線是居中的,這樣在放大後也是居中的,如下

image.png

這樣在不改變viewbox的情況下也能實現相同的效果,有興趣的小夥伴可以下去試一試

五、總結一下優缺點

以上共介紹了 3 種完全不同的繪製虛線的方式,原理各不相同,也有各自的優缺點,下面總結一下

CSS 漸變混合模式的優點在於實現思路比較簡單,很容易想到,純色背景優先推薦,缺點是混合模式有一些侷限性,比如在黑色背景下可能需要換一種模式了

CSS 錐形漸變的優點在於程式碼實現簡單,不受結構限制,缺點是有點不好理解,還有就是相容性稍微差一些

SVG 自適應背景的優點在於使用簡單,基本等同於“切圖”,缺點是需要掌握 SVG 的特性,而且無法直接透過 CSS 改變顏色,只能換圖

綜合來講,如果相容性沒有要求,首推第2種方式,其次是 SVG 方式,最後才是混合模式

這幾種方式你學會了嗎?最後,如果覺得還不錯,對你有幫助的話,歡迎點贊、收藏、轉發❤❤❤

歡迎關注我的公眾號:前端偵探