HTML 页面中的 SVG
SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。
1>使用 <embed> 标签
<embed> 标签被所有主流的浏览器支持,并允许使用脚本。
注释:当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。
语法:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
注释:pluginspage 属性指向下载插件的 URL。
var svgEmbed = document.getElementById("embed").getSVGDocument();
2>使用 <object> 标签
<object> 标签是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。
注释:假如您安装了最新版本的 Adobe SVG Viewer,那么当使用 <object> 标签时 SVG 文件无法工作(至少不能在 IE 中工作)!
语法:
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
注释:codebase 属性指向下载插件的 URL。
var svgObject = document.getElementById("object").contentDocument;
3>使用 <iframe> 标签
<iframe> 标签可工作在大部分的浏览器中。
语法:
<iframe src="rect.svg" width="300" height="100">
</iframe> var svgIframe = document.getElementById("iframe").contentDocument; 程序员的基础教程:菜鸟程序员
HTML 页面中的 SVG的更多相关文章
- 在页面中嵌入svg的几种方法
//在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本.注释:当在 HTML 页面中嵌入 SVG 时使用 < ...
- HTML页面中嵌入SVG
HTML页面中嵌入SVG的几种方式 你有N种理由使用SVG在页面中展示图像,如它的矢量特性.广泛的浏览器支持.比JPEG和PNG更小的体积.可用CSS设置外观.使用DOM API操作以及各种可用的SV ...
- 如何在页面中使用svg图标
1.svg图标长啥样 注意:图标的宽高无所谓,使用时可以根据需求修改,fill后面是颜色的填充,可修改图标颜色. <svg viewBox="0 0 1024 1024" v ...
- HTML5中的SVG
* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...
- html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
- 在前端页面中使用@font-face来显示web自定义字体【转】
本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...
- 在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
- vue中引入.svg图标,使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...
- vue中使用svg字体图标
1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...
随机推荐
- checkbox不显示,试试去掉-webkit-appearance这个样式
目前在项目中发现一个大坑,搞的我找了好久不知道因为什么,自用的reset.css中加入了 -webkit-appearance: none;其他所有表单没有出现问题,但checkbox会不显示,值改为 ...
- Machine Learning 方向读博的一些重要期刊及会议 && 读博第一次组会时博导的交代
读博从报道那天算起到现在已经3个多月了,这段时间以来和博导总共见过两次面,寥寥数语的见面要我对剩下的几年读书生活没有了太多的期盼,有些事情一直想去做却总是打不起来精神,最后挣扎一下还是决定把和博导开学 ...
- Android filesystem system rw(read/write) permission
/********************************************************************************* * Android filesys ...
- I.MX6 Linux U-boot 环境变量解析
/********************************************************************************** * I.MX6 Linux U- ...
- 关于const 和指针
这个很久之前就很困扰的问题,现在再理一下: 1,指向const对象的指针 >C++强制要求指向const对象的指针也必须具有const特性!!!也就是不能把一个const对象的地址赋给一个非co ...
- 【idea】常用快捷键
快捷键盘含义 键组合 进入一个类的实现 alt+command+B 加get,set,构造函数,重写方法 command+N 全项目关键字查找 shift+command+F 查看一个类在哪儿被依赖 ...
- 关于Eclipse中import javax.servlet.*出错
今天为了调试一下我写的Servlet,突然间,发现我的站点下所有的Servlet全部都出错了,仔细一看,原来是import javax.servlet.*这里出错了. 然后我就上网查阅了一些资料,才发 ...
- Jacoco+Jenkines小白之路
Jacoco+Jenkines小白之路 最近工作中正在推广jacoco的增量覆盖率的统计,想学习一波,纯粹采坑中,适合小白学习jacoco. 一.代码覆盖率 引入代码覆盖率 : 代码覆盖率是指对现有代 ...
- c/c++指针详解(一)
一:相关概念 1.指针数组:int *p[6] 是数组,是一个存放指针的数组,也就是里面存放的是地址. 2.数组指针:int (*p)[6] ...
- DevExpress GridControl 单元格添加进度条(ProgressBar)
首先可以使用DevExpress GridControl 自带的进度条控件. 但是我要用一个方法来设置所以的单元格进度,而不是每个单元格都要设置一遍,同时我想要根据进度值不同,进度条显示不同的颜色. ...