html5如何使用svg(将SVG图引入到HTML页面的实现)
类别:Web前端 浏览量:612
时间:2021-10-02 01:42:43 html5如何使用svg
将SVG图引入到HTML页面的实现将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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
热门推荐
- html中hr标签
- dedecms字数代码(用dedecms实现拼音显示文章标题页文件名的方法)
- 服务器启动nginx服务的命令(Nginx服务器添加Systemd自定义服务过程解析)
- ExecuteNonQuery、ExecuteScalar、ExecuteReader区别
- ExecuteNonQuery()返回值
- laravel新增数据表(laravel 多图上传及图片的存储例子)
- dedecms点赞功能怎么做呢(dedecms自定义表单添加发布时间功能的方法)
- 将匿名对象作为Model数据传给View
- webpack打包公共文件(webpack文件打包错误异常)
- 免费ftp服务器怎么用(几种流行的ftp服务器软件推荐)