中国少妇被黑人XXXXX

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

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

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

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

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

中国少妇被黑人XXXXX,chinese性旺盛老熟女,18禁强伦姧人妻又大又_主页