• <kbd id="sucug"></kbd>
    技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    SVG圖標:icon-home【代碼】

    作者:admin    時間:2022-11-28 17:41:31    瀏覽:

    本文介紹一個在網頁設計中比較常用的首頁圖標(icon-home),一些人可能會選擇用字體圖標如FontAwesome來實現,不過本文介紹的是用SVG來實現的方法,好處是,不用附帶加載一大堆字體文件,也不用配置Web服務器添加某些映射腳本。

     

    有兩種寫法,一種是把SVG代碼寫在HTML代碼里,另一種寫法是把SVG代碼寫到一個獨立的文件里,然后在HTML代碼里引用該文件。

    方法一:不用獨立SVG文件

    HTML(SVG)

    <svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol id="icon-home" viewBox="0 0 1024 1024">
        <title>home</title>
       <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
        </symbol>
      </defs>
    </svg>

    <svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>

    CSS

    body {
      font: 32px sans-serif; color: #444;
      margin: 1em;
    }
    .icon {
      display: inline-block;
      color: #444444;
      width: 1em;
      height: 1em;
      fill: currentColor;
    }
    .icon-home {
      color: red;
      font-size: 48px;
    }

    代碼解釋

    可以通過CSS的代碼設置圖標(icon)的大小,width: 1em;height: 1em;,也可設置圖標的顏色,color: #444444;。

    完整HTML

    <html>
    <head>
    <title>SVG Icons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
    body {
      font: 32px sans-serif; color: #444;
      margin: 1em;
    }
    .icon {
      display: inline-block;
      color: #444444;
      width: 1em;
      height: 1em;
      fill: currentColor;
    }
    .icon-home {
      color: red;
      font-size: 48px;
    }
    </style>
    </head>

    <body>
    <svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol id="icon-home" viewBox="0 0 1024 1024">
      <title>home</title>
      <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
        </symbol>
      </defs>
    </svg>

    <svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>
      
    </body>
    </html>

    demodownload

    方法二:使用獨立SVG文件

    我們可以把SVG代碼獨立成一個文件,然后在HTML代碼里引用。

    svg文件

    首先,創建一個SVG獨立文件,symbol-defs.svg,代碼如下:

    <svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol id="icon-home" viewBox="0 0 1024 1024">
       <title>home</title>
       <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
        </symbol>
      </defs>
    </svg>

    HTML代碼

    <html>
    <head>
    <title>SVG Icons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
      body {
      font: 32px sans-serif; color: #444;
      margin: 1em;
    }
    .icon {
      display: inline-block;
      color: #444444;
      width: 1em;
      height: 1em;
      fill: currentColor;
    }
    .icon-home {
      color: red;
      font-size: 48px;
    }
    </style>
    </head>

    <body>

    <svg class="icon icon-home"><use xlink:href="symbol-defs.svg#icon-home"></use></svg><span> icon-home</span>
      
    </body>
    </html>

    demodownload

    總結

    本文介紹了SVG實現的圖標:icon-home,有兩種寫法,一種是把SVG代碼寫在HTML代碼里,另一種是把SVG代碼獨立用一個文件,然后在HTML代碼里引用。個人建議用獨立SVG文件,因為更好維護,HTML代碼也更簡潔了。

    另外要說的是,本文只介紹了一個SVG圖標,要想獲得更多的SVG圖標,可看此文《逾千個SVG/PNG常用矢量圖標(含HTML代碼)免費下載》。

    相關文章

    標簽: SVG  CSS圖標  
    x
    • 站長推薦
    国产成年女人人AA人视频看看-婷婷黄色视频-一女被两男吃奶添下A片免费-欧美黑人又粗又大高潮喷水