<p id="rrtt5"></p><ruby id="rrtt5"></ruby>

      系統城裝機大師 - 固鎮縣祥瑞電腦科技銷售部宣傳站!

      當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

      html網頁引入svg圖片的4種方式

      時間:2022-09-12來源:www.1999hs.com作者:電腦系統城

      web應用開發使用svg圖片,總結了下,可以有如下4種方式:

      1. 直接插入頁面。
      2. img標簽引入。
      3. css引入。
      4. object標簽引入。

      1. 直接插入頁面

      在html頁面,可以直接使用svg標簽。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title></title>
          </head>
          <body>
              <!-- 一個svg圖片 -->
              <svg width="200" height="150" style="border: 1px solid steelblue">
                  <!-- 里面有一個矩形 -->
                  <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
              </svg>
          </body>
      </html>

      運行效果:

      1

      2. img標簽引入

      除了在網頁里直接寫svg標簽,也可以通過img引入,就像引入jpeg、png圖片一樣。

      1)新建svg圖片

      那么我們就要先新建一個svg圖片文件,我們把上面直接寫在網頁里的svg拿來用:

      1
      2
      3
      <svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
          <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
      </svg>

      這邊內容有兩點不一樣:

      1. 需要聲明命名空間 xmlns 這個屬性,命名空間可以本文尾部列出的參考資料。
      2. 移除了原先寫在 svg 標簽上的樣式,style="border: 1px solid steelblue"。

      把內容保存到test.svg文件,這個就是一張圖片文件了,可以嘗試在瀏覽器打開看看。

      2)使用img標簽引入

      假設test.svg和網頁文件在同一個目錄下:

      1 <img src="test.svg" style="border: 1px solid steelblue" />

      和引入jpeg、png類似,直接src屬性設置圖片路徑即可,另外我們把原先在svg的樣式移到了img標簽這邊。

      運行效果和上面是一樣的:

       

      2

      現在網上有很多svg做的圖片,可以參考:https://www.iconfont.cn,一個不錯的icon圖標網站。

      3

      3. css引入

      css引入就是把圖片當成背景圖引入:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <style type="text/css">
          .svg {
              width: 200px;
              height: 150px;
              border: 1px solid steelblue;
              background-image: url(test.svg); // 當成背景引入
          }
      </style>
      <div class="svg"></div>

      4. object引入

      和img引入類似,需要一個svg文件,然后用屬性data引入:

      1 <object data="test.svg" style="border: 1px solid steelblue"></object>

      運行效果和上面類似,就不再貼圖。

      其他標簽

      其他標簽如:embed、iframe標簽雖然也可以引入,但是不推薦使用了,詳情可以參考本文尾部列出的參考資料。

      分享到:

      相關信息

      • HTML5 video自定義視頻播放器

        HTML5 video自定義視頻播放器...

        2020-03-04

      • HTML5之audio屬性

        audio主要支持的音頻格式:mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...

        2020-03-04

      系統教程欄目

      欄目熱門教程

      人氣教程排行

      站長推薦

      熱門系統下載

      天堂资源中文WWW,久久精品女人天堂AV免费观看,无码专区一ⅤA亚洲V天堂,免费观看在线AⅤ天堂视频