SVG嵌入网页的几种方式

时间 2020-08-18

标签 svg 嵌入网页几种方式栏目 HTML 繁體版

原文原文链接

SVG是一种矢量图，放大缩小皆不会失真。这种矢量图，能够用做标签或者用做一些具备交互效果的图片。咱们使用SVG做为网页的一部分的时候，有以下几种方法：javascript

一，使用embed标签html

<embed src="SVG路径" type="image/svg+xml"/>java

二，使用object标签ajax

<object data="SVG路径" type="image/svg+xml"/>浏览器

三，使用iframesvg

<iframe src="SVG路径"></iframe>ui

四，直接用img引入svgurl

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

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

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

六，直接嵌入网页

<body>

　　<div>

　　　　<svg>....</svg>

　　</div>

</body>

七，使用JQuery的load()或ajax加载进来

好比咱们要将svg文件装载到<div>中

　　<div id="div"></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：

　　<script type="text/javascript" src="svg.js"></script>

2，其次直接在div中嵌入svg标签：

　　<body>

　　　　<div>

　　　　　　<svg>....</svg>

　　　　</div>

　　</body>

这样能有效兼容低版本IE，从IE9开始。

以上是个人查找总结，若是有什么不对的地方，请你们评论，我会及时查看修改。

相关文章

相关标签/搜索

嵌入式 - ARM

嵌入式开发

嵌入式Linux+ARM

网站品质教程

网站建设指南

代码格式化

每日一句

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

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<