日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一篇文章帶你了解SVG圖標(biāo)

SVG圖標(biāo)是SVG圖像，用作Web應(yīng)用程序或移動應(yīng)用程序內(nèi)的圖標(biāo)或圖像按鈕。SVG圖標(biāo)也可以用于徽標(biāo)。文章說明了SVG圖標(biāo)如何創(chuàng)建自己的SVG圖標(biāo)，以及在何處可以下載高質(zhì)量的預(yù)制SVG圖標(biāo)。

成都創(chuàng)新互聯(lián)主營恒山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),恒山h5小程序制作搭建,恒山網(wǎng)站營銷推廣歡迎恒山等地區(qū)企業(yè)咨詢

一、SVG圖標(biāo)的優(yōu)勢

圖標(biāo)使用SVG的優(yōu)點(diǎn)：

1、可以輕松地按比例放大和縮小圖標(biāo)，具體取決于要在應(yīng)用程序中顯示的位置以及顯示應(yīng)用程序的屏幕尺寸。

2、SVG圖標(biāo)具有優(yōu)于位圖圖形的優(yōu)點(diǎn)，即按比例放大或縮小時(shí)它們?nèi)匀豢雌饋聿诲e。

3、位圖圖形在按比例放大時(shí)趨于像素化，而在按比例縮小時(shí)會失去質(zhì)量(像素)。

二、在Web Apps中使用SVG圖標(biāo)

如在Web瀏覽器中顯示SVG所述，有幾種方法可以在Web瀏覽器中顯示SVG，作為HTML頁面的一部分。但是，在顯示SVG圖標(biāo)時(shí)，使用HTML的img元素來顯示圖標(biāo)是最容易的，HTML img元素可以輕松地放大和縮小SVG圖標(biāo)的大小。

這是img顯示SVG圖標(biāo)元素：

 
 
 
 
    
  
  
  
  
  1.  
    2.

 

要放大或縮小SVG圖標(biāo)的大小，只需使用CSS width或height樣式屬性。

下面是添加了CSS Height Style屬性的img元素示例：

 
 
 
 
    
  
  
  
  
  1.  
    2.

 

要在放大或縮小SVG圖標(biāo)時(shí)保持其長寬比，應(yīng)僅為其中一個width 或height - 而不能同時(shí)設(shè)置這兩個值。當(dāng)僅設(shè)置其中一個屬性的寬度時(shí)，瀏覽器將沿另一個軸相應(yīng)縮放SVG圖標(biāo)，以便SVG圖標(biāo)保持其縱橫比。

三、自定義SVG圖標(biāo)

有時(shí)可能需要創(chuàng)建自己的SVG圖標(biāo)。SVG圖標(biāo)只是包含在它自己的SVG文件中的SVG圖像。

下面是一個非常簡單的圓形圖標(biāo)，由SVG circle元素組成：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.          
    5. 
  
  
  
  
  5.         項(xiàng)目 
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.          
    9. 
  
  
  
  
  9.              
    10. 
  
  
  
  
  10.              
    11. 
  
  
  
  
  11.          
    12. 
  
  
  
  
  12.      
    13. 
  
  
  
  
  13.  
    14.

SVG圖標(biāo)與img元素一起顯示時(shí)的效果圖：

 

但是，當(dāng)使用img元素顯示此SVG圖標(biāo)，并放大和縮小img元素的大小時(shí)，SVG圖標(biāo)不會放大或縮小。相反，或多或少會顯示SVG畫布。

下面是將img CSS Height屬性設(shè)置為32。

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.         xmlns:xlink="http://www.w3.org/1999/xlink"> 
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.  
    5.

 

注：

如何僅顯示圓圈的一部分，而不是按比例縮小整個圓圈。

造成此問題的原因是SVG圖像文件缺少某些信息。必須為SVG viewBox屬性設(shè)置一個值 。SVG viewBox屬性指定應(yīng)顯示多少SVG畫布(在X和Y方向上)。

如何只顯示SVG畫布的包含圓圈圖標(biāo)的部分?

只想顯示SVG畫布的包含圓圈圖標(biāo)的部分。該區(qū)域從點(diǎn)0,0延伸到點(diǎn)128,128(圓的半徑為64，以64，64為中心)。使用SVG Viewbox屬性，可以指定只渲染SVG畫布的這一區(qū)域。

下面是設(shè)置了Viewbox值的SVG圓圖標(biāo)的外觀。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.              
    3. 
  
  
  
  
  3.              
    4. 
  
  
  
  
  4.          
    5. 
  
  
  
  
  5.          
    6. 
  
  
  
  
  6.              
    7. 
  
  
  
  
  7.              
    8. 
  
  
  
  
  8.          
    9. 
  
  
  
  
  9.          
    10. 
  
  
  
  
  10.              
    11. 
  
  
  
  
  11.              
    12. 
  
  
  
  
  12.          
    13.

這是顯示的SVG圖標(biāo)，高度分別為16、32和48像素：

 

四、總結(jié)

本文基于HTML基礎(chǔ)，介紹了SVG 圖標(biāo)。什么是SVG圖標(biāo)，以及SVG圖標(biāo)的在實(shí)際的優(yōu)勢，如何在Web Apps中使用SVG圖標(biāo)，如何去自定義自己的SVG圖標(biāo)。每一個目錄都通過案例分析，運(yùn)行效果圖的展示進(jìn)行詳細(xì)講解。能夠加深讀者的印象。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動手實(shí)現(xiàn)的時(shí)候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

本文轉(zhuǎn)載自微信公眾號「前端進(jìn)階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號。


本文名稱：一篇文章帶你了解SVG圖標(biāo)
本文鏈接：http://m.5511xx.com/article/dhjpicg.html