石頭自清潔掃拖機器人G10S評測：多年黑科技集大成之作 懶人終極福音
科技圈經常能看到一個詞叫“縫合怪”，用來形容那些把好多功能或者外觀結合在一起的產品，通常這樣的詞是貶義詞，但如果真的是產品縫合的好、縫合的實用的話，那它就成了中性詞，今
再次介紹一些你可能沒用過的SVG小技巧。
再次介紹一些你可能沒用過的SVG小技巧。
有時候會遇到一些完全相同的圖形，如果能用上 CSS背景平鋪，那就再合適不過了。舉個例子，有這樣一個按鈕。
相比普通的按鈕，多個左右兩個小裝飾，如果是你，會怎樣實現呢？
假設這個小圖標是a.svg，想了一下，應該有以下幾種方式。
剛好用上::before和::after，設置相同的背景就行了，示意如下：
button::before,button::after{%20%20content:'';%20%20background:%20url(a.svg)}利用 CSS背景可以疊加的特性，設置兩個背景就可以了，分別定位，示意如下：
button{%20%20background:%20url(a.svg)%2010px%20center%20no-repeat,url(a.svg)%20right%2010px%20top%20center%20no-repeat}這兩種方式都是不錯的方式，但是感覺還是有些浪費，畢竟把兩個相同的圖案重復寫了兩遍。
為啥不能直接用背景平鋪呢？因為無法直接設置平鋪的間隔，就像這樣。
這時，如果能充分發揮SVG的特性，就可以僅僅使用平鋪的方式來實現我們想要的效果了，一起看看吧~
就以上面的小圖標為例，從 Figma中可以復制這段svg，如下：
<svg%20width="16"%20height="16"%20viewBox="0%200%2016%2016"%20fill="none"%20xmlns="http://www.w3.org/2000/svg">%20%20%20%20<path%20d="M15.021%208.028L15%208.027c-.262-.26-.876-.747-2.008-.701.13-.314.027-1.204-.676-1.227.179.574-.803.974-1.361%201.155-.484.156-1.025.344-1.16.622l-.437-.003.002-.43-.276-.001-.004.428-.25-.002c-.028-.022-.058-.047-.091-.07a.643.643%200%200%200-.316-.29.663.663%200%200%200-.21-.22%203.071%203.071%200%200%200-.109-.157l.002-.21.43.004.003-.277-.43-.004.002-.436c.283-.127.478-.667.644-1.152.19-.555.606-1.53%201.18-1.341-.013-.704-.902-.822-1.216-.695.063-1.135-.417-1.754-.67-2.02V.977L8.036.99%208.028.977l-.001.02c-.26.263-.747.877-.701%202.009-.314-.13-1.204-.027-1.228.676.574-.179.974.803%201.155%201.362.157.484.345%201.025.622%201.159l-.003.437-.43-.002v.277l.427.003-.002.25c-.022.028-.046.058-.069.091a.643.643%200%200%200-.29.317.664.664%200%200%200-.222.21%203.07%203.07%200%200%200-.156.108l-.21-.002.004-.43-.276-.002-.004.43-.436-.002c-.127-.283-.667-.478-1.152-.644-.555-.19-1.53-.606-1.341-1.18-.704.013-.822.902-.695%201.216-1.135-.063-1.754.417-2.02.67H.977l.012.012-.012.009.02.001c.263.26.877.747%202.009.702-.13.314-.027%201.203.676%201.227-.179-.574.803-.974%201.362-1.155.484-.157%201.024-.345%201.159-.622l.437.003-.002.43h.277l.003-.427.25.002c.028.022.058.046.091.069a.643.643%200%200%200%20.317.29c.058.101.135.172.21.222.04.06.077.114.108.156l-.002.21-.43-.004-.002.276.43.004-.002.437c-.283.127-.478.666-.644%201.15-.19.556-.606%201.532-1.18%201.342.013.705.902.822%201.216.696-.063%201.134.417%201.753.67%202.02v.022l.012-.011c.004.003.006.007.009.012l.001-.021c.26-.263.747-.877.702-2.009.314.13%201.203.027%201.227-.676-.574.179-.974-.803-1.155-1.362-.157-.483-.345-1.024-.622-1.159l.003-.437.43.002v-.277l-.427-.003.002-.25c.022-.028.046-.058.069-.091a.643.643%200%200%200%20.29-.317.664.664%200%200%200%20.222-.21c.06-.04.114-.077.156-.108l.21.002-.004.43.276.002.004-.43.437.002c.127.283.666.478%201.15.644.556.19%201.532.606%201.342%201.18.705-.013.823-.902.696-1.216%201.134.063%201.753-.417%202.02-.67h.022a1.093%201.093%200%200%201-.011-.012c.003-.004.007-.006.012-.009h-.002z"%20fill="#000"/></svg>嗯，看著非常亂，沒關系，我們不必關注里面的細節。
我們直接放在 html 中來展示這段svg，效果是這樣的。
因為這段 svg有自帶的尺寸，最后展示的就是16%20*%2016的大小。
如果我們手動改變這個svg的尺寸呢？為了方便觀察，我們給svg添加一個邊框，如下：
svg{ width:%20200px;%20%20height:%20100px;%20%20outline:%201px%20dashed;}你猜會是什么樣的？
下面有%203%20個選項。
思考一分鐘...
思考完成，答案是A，你猜對了嗎？
為什么會這樣呢？有點類似于object-fit:contain的效果。其實這是viewBox造成的，viewBox會按照尺寸等比放大從而鋪滿整個svg。
有關 viewBox的更多介紹，可以參考張鑫旭老師的這篇文章：理解SVG%20viewport,viewBox,preserveAspectRatio縮放。
如果去除viewBox，svg內部該是什么樣就是什么樣，也就是仍然是16*16的大小。
<!--去除viewBox屬性--><svg%20width="16"%20height="16"%20fill="none"%20xmlns="http://www.w3.org/2000/svg">%20%20...</svg>結果如下：
也就是說，在去除viewBox之后，無論svg尺寸是多少，里面的圖標都不會變化。
看似好像沒什么用？
其實用處可大了，可以讓背景以我們想要的方式平鋪，那就來看接下來的應用。
現在來簡單實現文章開頭所示的按鈕效果。html很簡單，就一個標簽。
<button>召喚卡牌</button>然后簡單裝飾一下，繪制圓角和背景。
button{%20%20border:%200;%20%20outline:%200;%20%20padding:%208px%2036px;%20%20font-size:%2012px;%20%20line-height:%2016px;%20%20border-radius:%2030px;%20%20color:%20#FFEFDB;%20%20background:%20#FF2A2A;}效果如下：
接下來，我們要用上前面的那段svg，先去除viewBox屬性，為了能夠通過背景尺寸控制svg大小，我們可以將svg的尺寸改成100%。
示意如下：
<svg%20width="100%"%20height="100%"%20fill="none"%20xmlns="http://www.w3.org/2000/svg">%20%20...</svg>然后將這段svg轉換成css內聯格式，推薦用張鑫旭老師的在線轉換工具。
SVG在線壓縮合并工具。
可以得到這樣一段。
--icon:%20url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15.021%208.028L15%208.027c-.262-.26-.876-.747-2.008-.701.13-.314.027-1.204-.676-1.227.179.574-.803.974-1.361%201.155-.484.156-1.025.344-1.16.622l-.437-.003.002-.43-.276-.001-.004.428-.25-.002c-.028-.022-.058-.047-.091-.07a.643.643%200%200%200-.316-.29.663.663%200%200%200-.21-.22%203.071%203.071%200%200%200-.109-.157l.002-.21.43.004.003-.277-.43-.004.002-.436c.283-.127.478-.667.644-1.152.19-.555.606-1.53%201.18-1.341-.013-.704-.902-.822-1.216-.695.063-1.135-.417-1.754-.67-2.02V.977L8.036.99%208.028.977l-.001.02c-.26.263-.747.877-.701%202.009-.314-.13-1.204-.027-1.228.676.574-.179.974.803%201.155%201.362.157.484.345%201.025.622%201.159l-.003.437-.43-.002v.277l.427.003-.002.25c-.022.028-.046.058-.069.091a.643.643%200%200%200-.29.317.664.664%200%200%200-.222.21%203.07%203.07%200%200%200-.156.108l-.21-.002.004-.43-.276-.002-.004.43-.436-.002c-.127-.283-.667-.478-1.152-.644-.555-.19-1.53-.606-1.341-1.18-.704.013-.822.902-.695%201.216-1.135-.063-1.754.417-2.02.67H.977l.012.012-.012.009.02.001c.263.26.877.747%202.009.702-.13.314-.027%201.203.676%201.227-.179-.574.803-.974%201.362-1.155.484-.157%201.024-.345%201.159-.622l.437.003-.002.43h.277l.003-.427.25.002c.028.022.058.046.091.069a.643.643%200%200%200%20.317.29c.058.101.135.172.21.222.04.06.077.114.108.156l-.002.21-.43-.004-.002.276.43.004-.002.437c-.283.127-.478.666-.644%201.15-.19.556-.606%201.532-1.18%201.342.013.705.902.822%201.216.696-.063%201.134.417%201.753.67%202.02v.022l.012-.011c.004.003.006.007.009.012l.001-.021c.26-.263.747-.877.702-2.009.314.13%201.203.027%201.227-.676-.574.179-.974-.803-1.155-1.362-.157-.483-.345-1.024-.622-1.159l.003-.437.43.002v-.277l-.427-.003.002-.25c.022-.028.046-.058.069-.091a.643.643%200%200%200%20.29-.317.664.664%200%200%200%20.222-.21c.06-.04.114-.077.156-.108l.21.002-.004.43.276.002.004-.43.437.002c.127.283.666.478%201.15.644.556.19%201.532.606%201.342%201.18.705-.013.823-.902.696-1.216%201.134.063%201.753-.417%202.02-.67h.022a1.093%201.093%200%200%201-.011-.012c.003-.004.007-.006.012-.009h-.002z'%20fill='%23FFEFDB'/%3E%3C/svg%3E")接著，將這段svg背景放到按鈕中。
button{%20%20background:%20var(--icon)%20#FF2A2A;}效果如下:
很明顯，此時這個svg圖標背景默認尺寸是充滿整個容器的，也就是100%%20*%20100%。如果希望右邊也出現平鋪一個圖標，可以減小背景尺寸，比如。
button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px)}效果如下：
然后改變水平位置。
button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px);%20%20background-position:%2016px;}效果如下：
左右已經出現圖標了，現在只需要垂直居中就可以了，這個也很好實現，設置尺寸為圖標本身大小，然后改變背景位置就行了。
button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px)%2016px;%20%20background-position:%2016px%20center;}效果如下：
垂直方向也平鋪了，所以還需要改變一下平鋪方式，僅限水平方向。
button{%20%20background:%20var(--icon)%20#FF2A2A;%20%20background-size:%20calc(100%%20-%2048px)%2016px;%20%20background-position:%2016px%20center;%20%20background-repeat:%20repeat-x;}這樣就僅僅使用平鋪完成了想要的效果！
是不是有些不可思議？下面是一個示意圖，紫色圓圈代表圖標，紫色邊框代表svg尺寸，也就是背景尺寸，設置為100%%20-%2036px后，水平方向的平鋪就可以顯示兩個圓圈了，然后適當移動背景位置，就可以看到左右兩邊的圖標了。
當然這種實現也是完全是自適應的，無論什么尺寸都可以完美適配。
完整代碼可以查看以下鏈接：
里面有提到用徑向漸變的方式來繪制內凹圓角，但是漸變一直都是一個非常難學的技巧，語法非常多，一般同學表示接受不了。
這里就采用 SVG來代替徑向漸變的方式來實現這樣的優惠券效果。
首先，我們用設計軟件隨便畫個圓，這里以Figma為例，然后復制出SVG。
其實就是這樣一段代碼。
<svg%20width="40"%20height="40"%20viewBox="0%200%2040%2040"%20fill="none"%20xmlns="http://www.w3.org/2000/svg"><circle%20cx="20"%20cy="20"%20r="20"%20fill="#FF336F"/></svg>非常簡單吧。
然后去除viewBox，并且設置寬高為100%，這是為了讓SVG畫布尺寸撐滿整個容器。
<svg%20width="100%"%20height="100%"%20viewBox="0%200%2040%2040"%20fill="none"%20xmlns="http://www.w3.org/2000/svg"><circle%20cx="20"%20cy="20"%20r="20"%20fill="#FF336F"/></svg>接著轉換成CSS內聯格式。
--icon:%20url("data:image/svg+xml,%3Csvg%20width='100%'%20height='100%'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle%20cx='20'%20cy='20'%20r='20'%20fill='%23FF336F'/%3E%3C/svg%3E")然后用在 CSS 背景中。
div{%20%20background:%20var(--icon);}目前效果是這樣的。
我們需要將這個圓分割到4個角落上，可以直接用背景平移的方式。
div{%20%20background:%20var(--icon);%20%20background-position:%20-20px%20-20px;}這樣就可以了，演示如下：
不過這樣還沒完，我們需要實現的反向圓角，所以這里需要用遮罩的方式，減去 4 個角落。
回到這里，我們只需要一個完整的背景，減去剛才的圓角就可以了，具體實現如下：
.coupon{ background: linear-gradient(red,orange); -webkit-mask:linear-gradient(red,red), var(--icon); -webkit-mask-position: -20px -20px; -webkit-mask-composite: xor;}效果如下，其實和前面幾乎一致。
是不是沒有用到徑向漸變？
完整代碼可以查看以下鏈接：
有時候徑向漸變還是有很多局限的，復雜的圖形繪制不了或者成本很高。而 SVG就沒有這樣的限制了，如果能有一定的自適應特性，相信可以更方便的解決問題。
比如這樣一個帶圓角的自適應聚焦框，可能在大屏可視化比較常見，如下（CSS表示無能為力
本文鏈接：http://m.www897cc.com/showinfo-26-88574-0.html不一樣的SVG！SVG在CSS背景平鋪中的應用
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 我們一起聊聊結構體及其方法的使用法門
下一篇： Hive SQL底層執行過程詳細剖析
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號