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

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

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

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

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/html5/694152.html

相关文章

  • 自适应与响应式的区别

    自适应与响应式的区别

    根据日常开发经验及网上相关资料,用简单通俗易懂的大白话分析 自适应 跟 响应式 的区别。 注: 本文只分析自适应跟响应式的区别以及了解其由来的背景,不在于讨论其使用的方法 一、什么是自适应布局 自适应布局就是宽度自适用布局,在不......
    02-11
  • HTML5自定义mp3播放器源码教程

    HTML5自定义mp3播放器源码教程

    audio对象 src兼容.ogg .wav .mp3 audio controls src=data/imooc.wav/audio width autoplay loop muted静音 audio controls src=data/imooc.wav autoplay loop width=500 height=500 muted/audio 播放play() var myAudio = new Audio();......
    01-08
  • 使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨 效果图: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocu......
    01-05
  • 详解使用html2canvas实现将html内容写入到canvas中生成图片

    详解使用html2canvas实现将html内容写入到canvas中生成图片

    之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的 html2canvas官网: http://html2canvas.hertzen.com/ 一:下载html2canvas插......
    01-05
  • 详解HTML文本属性&颜色控制属性

    详解HTML文本属性&颜色控制属性

    一、文本装饰的属性 1.格式:text-decoration:underline; 2.取值: (1)underline代表下划线 (2)line-through代表删除线 (3)overline代表上划线 (4)none代表什么格式都没有(默认是这个属性) 注意:none的大多数用处在我们使用a......
    12-18
  • 关于html字符串正则判断和匹配的使用介绍

    关于html字符串正则判断和匹配的使用介绍

    最近在写一个组件,需要传入html字符串,里面用到了很多正则来判断是否是html标签或者匹配标签内的文本等,这里记录下。 如何判断传入的字符串包含一个闭合html标签 /\/?[a-z][\s\S]*/i 这个其实并不能判断标签闭合的完整性或者顺序等,......
    12-13
  • H5页面适配iPhoneX的教程

    H5页面适配iPhoneX的教程

    iPhoneX 打消了物理按键,改成底部小黑条,这一窜改导致网页呈现了比力难堪的屏幕适配问题。对付网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理惩罚,所以我们只需要存眷底部与小黑条的适配问题即可(即常见的吸底导航、返回顶......
    12-03
  • Html5之自定义属性(data-,dataset)

    Html5之自定义属性(data-,dataset)

    定义 H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性 div id=box1 data-name=Musk/divdiv id=box2 data-full-name=Elon Musk/div 获取 使用H5自定义属性对象dataset来获取 let box1 = document.getElementById(box1);le......
    11-19
  • 移动端html5判断是否滚动到底部并且下拉加载

    移动端html5判断是否滚动到底部并且下拉加载

    如何判断滚动是否滚动到了底部? 首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性,没有定义CSS或者内联......
    11-19
  • 5分钟实现Canvas鼠标跟随动画背景方法

    5分钟实现Canvas鼠标跟随动画背景方法

    关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧 gitHub传送门 = 前言 相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到自己的个人网站上,......
    11-19

最新更新