SVG嵌入网页的几种方式

雨点打透心脏的1/2处 2023-08-17 17:47 112阅读 0赞

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

一，使用embed标签

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

二，使用object标签

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

三，使用iframe

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

四，直接用img引入svg

<img src="SVG路径"/>

五，把svg当作背景，即：用background引入svg

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开始。

以上是我的查找总结，如果有什么不对的地方，请大家评论，我会及时查看修改。

转载于:https://www.cnblogs.com/yu-tang/p/11459056.html

发表评论取消回复

表情：

评论列表（有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读

相关几种请求方式

1.Axios 1.1 GET请求 <script src="https://unpkg.com/axios/dist/axios.min.js"></sc

青旅半醒/ 2024年04月07日 12:24/ 0 赞/ 98 阅读

相关异步编程的几种方式,你知道几种?

异步执行对于开发者来说并不陌生，在实际的开发过程中，很多场景多会使用到异步，相比同步执行，异步可以大大缩短请求链路耗时时间。比如：`「发送短信、邮件、异步更新等」`，这些都

怼烎@/ 2023年09月27日 21:44/ 0 赞/ 30 阅读

相关 SVG嵌入网页的几种方式

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

雨点打透心脏的1/2处/ 2023年08月17日 17:47/ 0 赞/ 113 阅读

相关异步编程的几种方式，你知道几种？

![816824355d1709a5614ebe522feeab18.png][] 来源：http://ericfu.me/several-ways-to-aync 近期尝

阳光穿透心脏的1/2处/ 2023年01月21日 02:17/ 0 赞/ 309 阅读

相关嵌入式工程师学习Qt的几种开发方式

关注+星标公众号，不错过精彩内容 ![format_png][] 作者 | 李肖遥转自 | 技术让梦想更伟大 qt值得学习吗？嵌入式要学的东西真的很多

心已赠人/ 2022年11月01日 05:28/ 0 赞/ 163 阅读

相关解析的几种方式

一条SQL的执行过程 1.在PGA中进行语法、语义检查(检查执行该SQL语句的用户是否有权限访问某个对象) 2.检查该SQL是否存在于共享池 3.如果SQL语句不

野性酷女/ 2022年08月11日 03:27/ 0 赞/ 267 阅读

相关网页使用SVG图标

<html> <style> .logo{ background-repeat:no-repeat; background-i

浅浅的花香味﹌/ 2022年05月28日 14:07/ 0 赞/ 262 阅读

相关在html中嵌入css代码的几种方式

转载自[CSDN博客][CSDN] [CSDN]: https://blog.csdn.net/liusure09/article/details/50194289?loc

约定不等于承诺〃/ 2022年05月16日 08:34/ 0 赞/ 306 阅读

相关在html中嵌入js代码的几种方式

1.最常用：使用script标签的src属性 <script>标签包含src属性，这个属性可以指定包含js代码的文件路径，使用示例如下： 1.首先在工程新建一个java

叁歲伎倆/ 2022年05月16日 07:05/ 0 赞/ 273 阅读

相关 HTML中嵌入SVG图片的N种方式

[https://segmentfault.com/a/1190000010942431][https_segmentfault.com_a_1190000010942431]

女爷i/ 2021年06月11日 15:13/ 0 赞/ 624 阅读