豆沙包

…… …… 所學所寫所想所做所悟…… ……

統計

隨筆 - 13
文章 - 0
評論 - 4
引用 - 0

常用鏈接

留言簿(1)

隨筆分類

隨筆檔案

文章分類

Groovy (rss)

收藏夾

Blog

JS-RPC

Web

搜索

閱讀排行榜

評論排行榜

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 閱讀(2959) 評論(3) 編輯收藏所屬分類: WebGraph

<?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">

<rect x="50" y="50" rx="5" ry="5" width="300" height="100" style="fill:#CCCCFF;stroke:#000099"/>

<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了）回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

# re: SVG 嵌入 HTML頁面的幾種方式 2009-05-07 12:49 bigch