酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

html5

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

实现将SVG图引入到HTML页面的方法

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-09-20
本篇文章主要介绍了实现将SVG图引入到HTML页面的方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

将SVG图引入到HTML网页,目前只有三种办法,前两种很相似,第三种更简单。下来介绍一下这是那种方法。

第一种:

使用<embed>标签:

这个是官方推荐的用法,但是这个官方是Adobe官方,不是W3C官方,现在的HTML标准里还没有这个标签。

 

<embed src="example.svg" width="300" height="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

pluginspage表示的是插件下载地址。

第二种:

使用<object>标签:

这个是W3C的规范,在HTML标准里有这个标签,这个标签里面不能使用js。
 
 
<object data="example.svg" width="300" height="300" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/imstall/" />

codebase也是插件下载地址

另外,如果安装了Adobe SVG Viewer ,这个就不能使用(这是什么理论,插件下载地址都是一样的…)。

第三种:

使用 <iframe> 标签,<iframe> 标签可工作在大部分的浏览器中。
 
 
<iframe src="rect.svg" width="300" height="100">
</iframe>

这里推荐一下,一个图标网址,上面全是免费的图标可供下载:




网址:http://www.iconfont.cn/plus/user/detail?uid=17211

原文链接:https://www.jb51.net/html5/694152.html

最新更新