SVG圖標跑到哪里了？

huashiou 發布于2019-08-30 15:55 / 1553人閱讀

摘要：先上圖，這是我們想要實現的圖標效果為了方便看出圖標的輪廓，我們將背景上色。也就是說劃定了應該顯示的圖像區域的起點位置以左上角為圖像起點和大小，所以它包含四個數字類型參數，分別代表盒子左上角的坐標和它的寬度和高度。

先上圖，這是我們想要實現的圖標效果：

（為了方便看出svg圖標的輪廓，我們將背景上色。）
此時我們使用

但我們運行之后得到的結果卻是這樣的：

很明顯，圖標過大，已經超出了svg的viewport所能顯示的范圍，那么這時我們怎么辦呢？
聰明的同學可能已經想到了，就是使用svg的viewBox屬性，我們先來看MDN對該屬性的定義：

The viewBox attribute defines the position and dimension

什么意思呢？其實就只有兩個關鍵字： position：位置，以及dimension：尺寸。
也就是說viewBox劃定了viewport應該顯示的圖像區域的起點位置（以viewBox左上角為圖像起點）和大小，所以它包含四個數字類型參數，viewBox="min-x min-y w h"分別代表viewBox盒子左上角的坐標（min-x min-y）和它的寬度和高度（w h）。
這時，我們依據路徑實際的尺寸，將viewBox設置之后如圖：

此時我們再來看看改代碼下的結果：

與預期完全一致，完美解決！

結語

通過這個小情境，實戰了svg的viewBox屬性的知識點，以更靈活運用，深入理解。

GPU云服務器云服務器網絡圖標不見了網絡連接圖標不見了阿里的云服務器放在了哪里買了云服務器在哪里找到

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117163.html

像打字一樣插入圖標-iconfont

摘要：簡介是什么就像名字一樣，就是圖標字體，像雅黑字體，思源字體一樣，這種字體就是由圖標構成有何優勢輕量性一個圖標字體比一系列的圖像特別是在屏中使用雙倍圖像要小。問題很小創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。簡介 - iconfont是什么？就像名字一樣，iconfont就是圖標字體，像雅黑字體，思源字體一樣，這種字體就是由圖標構成~ - 有何優勢？ 1、輕量性：一個圖...

warkiz 2019-08-29 16:58 評論0 收藏0
借助webpack對項目進行分析優化

摘要：由于項目的不斷擴大，只會影響我們定位功能和問題的速度，因此對冗余文件進行清理，是很重要的。我們在項目中使用的，自動將各個圖標進行。進入公司之后，接手的便是前人留下來的一個大項目。慶幸的是整個項目擁有完善的產品功能文檔，但是由于項目過于龐大，老舊。包含了打包過慢，冗余文件過多等諸多問題。想要快速的解決這些問題，想要完全把功能重構一遍的話，成本太高了。一個一個文件來過，時間成本也比較大。...

Me_Kun 2019-08-22 16:17 評論0 收藏0
CSS小技巧（一）：iconfont的使用

摘要：已經被添加入庫的圖標會以虛線框起來，以鑒別是否重復選取。點擊右上角的購物車小圖標，選擇添加至項目。創建項目并加入此新項目。將代碼引入頁面中，一般放在標簽內即可。這是一種最新的引入方式，也是未來主流的方式。在我們使用CSS對頁面進行編輯布局時，經常會用到一些小圖標或者logo。常見的比如我們在制作個人主頁時，使用超鏈接圖標來跳轉到你的微博或其他頁面等。這時候就會有一個很困擾的問題：去哪...

baiy 2019-08-30 15:54 評論0 收藏0