SVG嵌入網頁的幾種方式

時間 2020-08-18

標籤 svg 嵌入網頁幾種方式欄目 HTML 简体版

原文原文鏈接

SVG是一種矢量圖，放大縮小皆不會失真。這種矢量圖，能夠用做標籤或者用做一些具備交互效果的圖片。咱們使用SVG做爲網頁的一部分的時候，有以下幾種方法：javascript

一，使用embed標籤html

二，使用object標籤ajax

三，使用iframesvg

四，直接用img引入svgurl

<img src="SVG路徑"/>spa

五，把svg看成背景，即：用background引入svgxml

background-image: url("SVG路徑");

六，直接嵌入網頁

<body>

　　<div>

　　</div>

</body>

七，使用JQuery的load()或ajax加載進來

好比咱們要將svg文件裝載到<div>中

1，jQuery的load：　

　　用jQuery的load的話就要在js裏寫

　　　　$("#div").load("xxx.svg");

2，ajax加載就要在js裏這樣寫：

　　$.ajax({

　　　　url:"xxx.svg",

　　　　type:"get",

　　　　dataType:"html",

　　　　success:function(data){

　　　　　　　　　　　　　$("#div").html(data);

　　　　　　　　　　　　　　}

　　　　 });

八，在第四種方法的基礎上，爲了兼容低版本的瀏覽器，加入一個svg.js

1，首先用script標籤引入svg.js：

2，其次直接在div中嵌入svg標籤：

　　<body>

　　　　<div>

　　　　</div>

　　</body>

這樣能有效兼容低版本IE，從IE9開始。

以上是個人查找總結，若是有什麼不對的地方，請你們評論，我會及時查看修改。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。