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的更多相关文章

  1. 在页面中嵌入svg的几种方法

    //在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本.注释:当在 HTML 页面中嵌入 SVG 时使用 < ...

  2. HTML页面中嵌入SVG

    HTML页面中嵌入SVG的几种方式 你有N种理由使用SVG在页面中展示图像,如它的矢量特性.广泛的浏览器支持.比JPEG和PNG更小的体积.可用CSS设置外观.使用DOM API操作以及各种可用的SV ...

  3. 如何在页面中使用svg图标

    1.svg图标长啥样 注意:图标的宽高无所谓,使用时可以根据需求修改,fill后面是颜色的填充,可修改图标颜色. <svg viewBox="0 0 1024 1024" v ...

  4. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  5. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  6. 在前端页面中使用@font-face来显示web自定义字体【转】

    本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...

  7. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  8. vue中引入.svg图标,使用iconfont图标库

    阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...

  9. vue中使用svg字体图标

    1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...

随机推荐

  1. checkbox不显示,试试去掉-webkit-appearance这个样式

    目前在项目中发现一个大坑,搞的我找了好久不知道因为什么,自用的reset.css中加入了 -webkit-appearance: none;其他所有表单没有出现问题,但checkbox会不显示,值改为 ...

  2. Machine Learning 方向读博的一些重要期刊及会议 && 读博第一次组会时博导的交代

    读博从报道那天算起到现在已经3个多月了,这段时间以来和博导总共见过两次面,寥寥数语的见面要我对剩下的几年读书生活没有了太多的期盼,有些事情一直想去做却总是打不起来精神,最后挣扎一下还是决定把和博导开学 ...

  3. Android filesystem system rw(read/write) permission

    /********************************************************************************* * Android filesys ...

  4. I.MX6 Linux U-boot 环境变量解析

    /********************************************************************************** * I.MX6 Linux U- ...

  5. 关于const 和指针

    这个很久之前就很困扰的问题,现在再理一下: 1,指向const对象的指针 >C++强制要求指向const对象的指针也必须具有const特性!!!也就是不能把一个const对象的地址赋给一个非co ...

  6. 【idea】常用快捷键

    快捷键盘含义 键组合 进入一个类的实现 alt+command+B 加get,set,构造函数,重写方法 command+N 全项目关键字查找 shift+command+F  查看一个类在哪儿被依赖 ...

  7. 关于Eclipse中import javax.servlet.*出错

    今天为了调试一下我写的Servlet,突然间,发现我的站点下所有的Servlet全部都出错了,仔细一看,原来是import javax.servlet.*这里出错了. 然后我就上网查阅了一些资料,才发 ...

  8. Jacoco+Jenkines小白之路

    Jacoco+Jenkines小白之路 最近工作中正在推广jacoco的增量覆盖率的统计,想学习一波,纯粹采坑中,适合小白学习jacoco. 一.代码覆盖率 引入代码覆盖率 : 代码覆盖率是指对现有代 ...

  9. c/c++指针详解(一)

    一:相关概念 1.指针数组:int *p[6]               是数组,是一个存放指针的数组,也就是里面存放的是地址. 2.数组指针:int (*p)[6]                 ...

  10. DevExpress GridControl 单元格添加进度条(ProgressBar)

    首先可以使用DevExpress GridControl 自带的进度条控件. 但是我要用一个方法来设置所以的单元格进度,而不是每个单元格都要设置一遍,同时我想要根据进度值不同,进度条显示不同的颜色. ...