資訊專欄INFORMATION COLUMN
摘要：先上圖，這是我們想要實(shí)現(xiàn)的圖標(biāo)效果為了方便看出圖標(biāo)的輪廓，我們將背景上色。也就是說(shuō)劃定了應(yīng)該顯示的圖像區(qū)域的起點(diǎn)位置以左上角為圖像起點(diǎn)和大小，所以它包含四個(gè)數(shù)字類型參數(shù)，分別代表盒子左上角的坐標(biāo)和它的寬度和高度。
先上圖，這是我們想要實(shí)現(xiàn)的圖標(biāo)效果：
（為了方便看出svg圖標(biāo)的輪廓，我們將背景上色。）
此時(shí)我們使用
The viewBox attribute defines the position and dimension
什么意思呢？其實(shí)就只有兩個(gè)關(guān)鍵字： position：位置，以及dimension：尺寸。
也就是說(shuō)viewBox劃定了viewport應(yīng)該顯示的圖像區(qū)域的起點(diǎn)位置（以viewBox左上角為圖像起點(diǎn)）和大小，所以它包含四個(gè)數(shù)字類型參數(shù)，viewBox="min-x min-y w h"分別代表viewBox盒子左上角的坐標(biāo)（min-x min-y）和它的寬度和高度（w h）。
這時(shí)，我們依據(jù)
此時(shí)我們?cè)賮?lái)看看改代碼下的結(jié)果：
與預(yù)期完全一致，完美解決！
通過(guò)這個(gè)小情境，實(shí)戰(zhàn)了svg的viewBox屬性的知識(shí)點(diǎn)，以更靈活運(yùn)用，深入理解。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/117163.html
摘要：簡(jiǎn)介是什么就像名字一樣，就是圖標(biāo)字體，像雅黑字體，思源字體一樣，這種字體就是由圖標(biāo)構(gòu)成有何優(yōu)勢(shì)輕量性一個(gè)圖標(biāo)字體比一系列的圖像特別是在屏中使用雙倍圖像要小。問(wèn)題很小創(chuàng)作自已的字體圖標(biāo)很費(fèi)時(shí)間，重構(gòu)人員后期維護(hù)的成本偏高。 簡(jiǎn)介 - iconfont是什么？ 就像名字一樣，iconfont就是圖標(biāo)字體，像雅黑字體，思源字體一樣，這種字體就是由圖標(biāo)構(gòu)成~ - 有何優(yōu)勢(shì)？ 1、輕量性：一個(gè)圖...
摘要：由于項(xiàng)目的不斷擴(kuò)大，只會(huì)影響我們定位功能和問(wèn)題的速度，因此對(duì)冗余文件進(jìn)行清理，是很重要的。我們?cè)陧?xiàng)目中使用的，自動(dòng)將各個(gè)圖標(biāo)進(jìn)行。 進(jìn)入公司之后，接手的便是前人留下來(lái)的一個(gè)大項(xiàng)目。慶幸的是整個(gè)項(xiàng)目擁有完善的產(chǎn)品功能文檔，但是由于項(xiàng)目過(guò)于龐大，老舊。包含了打包過(guò)慢，冗余文件過(guò)多等諸多問(wèn)題。想要快速的解決這些問(wèn)題，想要完全把功能重構(gòu)一遍的話，成本太高了。一個(gè)一個(gè)文件來(lái)過(guò)，時(shí)間成本也比較大。...
摘要：已經(jīng)被添加入庫(kù)的圖標(biāo)會(huì)以虛線框起來(lái)，以鑒別是否重復(fù)選取。點(diǎn)擊右上角的購(gòu)物車小圖標(biāo)，選擇添加至項(xiàng)目。創(chuàng)建項(xiàng)目并加入此新項(xiàng)目。將代碼引入頁(yè)面中，一般放在標(biāo)簽內(nèi)即可。這是一種最新的引入方式，也是未來(lái)主流的方式。 在我們使用CSS對(duì)頁(yè)面進(jìn)行編輯布局時(shí)，經(jīng)常會(huì)用到一些小圖標(biāo)或者logo。常見的比如我們?cè)谥谱鱾€(gè)人主頁(yè)時(shí)，使用超鏈接圖標(biāo)來(lái)跳轉(zhuǎn)到你的微博或其他頁(yè)面等。這時(shí)候就會(huì)有一個(gè)很困擾的問(wèn)題：去哪...
閱讀 3473·2023-04-26 00:58
閱讀 1333·2021-09-22 16:04
閱讀 3525·2021-09-02 15:11
閱讀 1662·2019-08-30 15:55
閱讀 2435·2019-08-30 15:55
閱讀 3623·2019-08-23 18:41
閱讀 3585·2019-08-23 18:18
閱讀 2828·2019-08-23 17:53
