SVG 嵌入 HTML页面的几种方式
SVG目前嵌入HTML页面中有下面几种方式
OBJECT
< object data = " rect.svg " width = " 300 " height = " 100 "
type = " image/svg+xml "
codebase = " http://www.adobe.com/svg/viewer/install/ " />
采用Object标签的一个好处是,这是一个标准的Html 4及以上规范的有效Tag,但可惜的如果你用的是最新的Adobe Viewer,那么反而是显示不出图象来:)
EMBED
< embed src ="rect.svg" width ="300" height ="100"
type ="image/svg+xml"
pluginspage ="http://www.adobe.com/svg/viewer/install/" />
这是推荐的一种写法,在ie与ff中,皆可工作,也可通过script使HTML与SVG相互通信,但不幸的是,embed不是一个规范的标签,所以不能直接用在严格的XHTML中,不过这个可以能过一个简单的trick来解决,改动一下DTD定义即可。
IFRAME
< iframe src ="rect.svg" width ="300" height ="100" >
</ iframe >
这个方式没什么好说的,完全OK,就是iframe的边框需要额外设置一下。
当然最希望看到的就是类似于下面的代码能早点在主流Browser中支持
< html
xmlns:svg ="http://www.w3.org/2000/svg" >
< body >< p > This is an HTML paragraph </ p >< svg:svg width ="300" height ="100" version ="1.1" >
< svg:circle cx ="100" cy ="50" r ="40" stroke ="black"
stroke-width ="2" fill ="red" />
</ svg:svg ></ body >
</ html >
目前还不行,呵呵。
分享到:
相关推荐
NULL 博文链接:https://long316.iteye.com/blog/1819017
将SVG图引入到HTML网页,目前只有三种办法,前两种很相似,第三种更简单。下来介绍一下这是那种方法。 第一种: 使用<embed>标签: 这个是官方推荐的用法,但是这个官方是Adobe官方,不是W3C官方,现在的...
SVG与html的交互(svg的js与html的js互调用)
SVG与html的交互(svg的js与html的js互调用).pdf
格式化的HTML文本转换成SVG文本源代码。利用contenteditable属性,div标签里的文本将可以编辑。借助execCommand,div标签的字体样式可以动态调整。源代码中包含了计算HTML文本结构、判断换行等功能,生成跟HTML所见...
HTML5 SVG动画404页面,活泼有趣,适合用在网站404页面,兼容主流浏览器
Vue中引入svg图标的两种方式 Vue中引入svg图标的方式 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true...
这是一款使用Snap.svg和svg路径变形制作html5页面切换效果。这款html5页面切换效果在页面切换的时候svg线条不断的摇摆,炫酷动感十足。
在html中嵌入SVG,SVG对象是一个object对象。Html和SVG都有各自的全局变量空间,者意味着html和SVG的交互必须建立在一个相互认识的基础之上。当然,以JavaScript编程,这是没有异议的。可问题在于,在html空间中,...
13种svg html5 loading页面加载动画弹出 html5 loading页面加载动画
最近在用svg的点击事件做东西,之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件,他们之间详细的区别如下: Canvas 与 SVG 的比较(详见) 下表列出了 canvas 与 SVG 之间的一些不同之处。...做出的网页在
这是一款使用html5 svg制作的加载loading动画特效插件。该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片。
html5 SVG绘图动画制作页面加载loading绘图动画效果 html5 SVG绘图动画制作页面加载loading绘图动画效果
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
svg练习
svg教程
html5 svg闪烁霓虹灯404错误页面特效,很有创意的一款网页404错误提示页面效果。
实现圆环进度条的三种方式 div svg canvas 可加qq群:179916551 免积分获取,沟通交流
SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程