豆沙包

…… …… 所学 所写 所想 所做 所悟…… ……

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 >

目前还不行，呵呵。

posted on 2006-08-20 22:30 carob 阅读(2951) 评论(3)  编辑  收藏 所属分类: WebGraph

评论

# re: SVG 嵌入 HTML页面的几种方式 2009-05-07 12:49 bigch

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">" target="_new" rel="nofollow">http://www.w3.org/2000/svg">
<head>
<title>SVG within XHTML Demo</title>
</head>
<body>

<p> You can embed SVG into XHTML, provided that your browser natively implements
SVG. E.g. Firefox 1.5 supports most of static SVG.
</p>

The SVG part starts below <hr />

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">
<!-- un petit rectangle avec des coins arroundis -->
<rect x="50" y="50" rx="5" ry="5" width="300" height="100" style="fill:#CCCCFF;stroke:#000099"/>
<!-- un texte au meme endroit -->
<text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
HELLO cher visiteur
</text>
</svg>

<hr />
The SVG part ended above
</body>
</html>

  回复  更多评论   

# re: SVG 嵌入 HTML页面的几种方式 2009-12-04 09:41 jing_jmh

请问那些代码都放在什么位置呀？  回复  更多评论   

# re: SVG 嵌入 HTML页面的几种方式 2009-12-04 09:46 jing_jmh

将第3种方法的代码直接拷贝到html的<body>中，结果，浏览器将这段代码在页面中显示出来了，却没有显示我的SVG图。（本机上已经安装了SVG Viewer了）  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航: