亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇

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

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

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

          時間:2022-09-12來源:www.snowmanhill.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

          系統教程欄目

          欄目熱門教程

          人氣教程排行

          站長推薦

          熱門系統下載

          亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇