﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-豆沙包-随笔分类-WebGraph</title><link>http://www.blogjava.net/carob/category/14252.html</link><description>…… …… 所学 所写 所想 所做 所悟…… …… </description><language>zh-cn</language><lastBuildDate>Tue, 27 Feb 2007 08:46:48 GMT</lastBuildDate><pubDate>Tue, 27 Feb 2007 08:46:48 GMT</pubDate><ttl>60</ttl><item><title>SVG 嵌入 HTML页面的几种方式</title><link>http://www.blogjava.net/carob/archive/2006/08/20/64450.html</link><dc:creator>carob</dc:creator><author>carob</author><pubDate>Sun, 20 Aug 2006 14:30:00 GMT</pubDate><guid>http://www.blogjava.net/carob/archive/2006/08/20/64450.html</guid><wfw:comment>http://www.blogjava.net/carob/comments/64450.html</wfw:comment><comments>http://www.blogjava.net/carob/archive/2006/08/20/64450.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/carob/comments/commentRss/64450.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/carob/services/trackbacks/64450.html</trackback:ping><description><![CDATA[
		<p>SVG目前嵌入HTML页面中有下面几种方式<br /><br /> OBJECT <br /></p>
		<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee">
				<span style="COLOR: #000000">&lt;</span>
				<span style="COLOR: #000000">object data</span>
				<span style="COLOR: #000000">=</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000">rect.svg</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000"> width</span>
				<span style="COLOR: #000000">=</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000">300</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000"> height</span>
				<span style="COLOR: #000000">=</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000">100</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000"> <br />type</span>
				<span style="COLOR: #000000">=</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000">image/svg+xml</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000">
						<br />codebase</span>
				<span style="COLOR: #000000">=</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000">http://www.adobe.com/svg/viewer/install/</span>
				<span style="COLOR: #000000">"</span>
				<span style="COLOR: #000000"> </span>
				<span style="COLOR: #000000">/&gt;</span>
		</div>
		<p>采用Object标签的一个好处是，这是一个标准的Html 4及以上规范的有效Tag,但可惜的如果你用的是最新的Adobe Viewer，那么反而是显示不出图象来：） <br /><br />EMBED</p>
		<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee">
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">embed </span>
				<span style="COLOR: #ff0000">src</span>
				<span style="COLOR: #0000ff">="rect.svg"</span>
				<span style="COLOR: #ff0000"> width</span>
				<span style="COLOR: #0000ff">="300"</span>
				<span style="COLOR: #ff0000"> height</span>
				<span style="COLOR: #0000ff">="100"</span>
				<span style="COLOR: #ff0000"> <br />type</span>
				<span style="COLOR: #0000ff">="image/svg+xml"</span>
				<span style="COLOR: #ff0000">
						<br />pluginspage</span>
				<span style="COLOR: #0000ff">="http://www.adobe.com/svg/viewer/install/"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
		</div>
		<p>这是推荐的一种写法，在ie与ff中，皆可工作，也可通过script使HTML与SVG相互通信，但不幸的是，embed不是一个规范的标签，所以不能直接用在严格的XHTML中，不过这个可以能过一个简单的trick来解决，改动一下DTD定义即可。<br /><br />IFRAME</p>
		<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee">
				<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">iframe </span>
				<span style="COLOR: #ff0000">src</span>
				<span style="COLOR: #0000ff">="rect.svg"</span>
				<span style="COLOR: #ff0000"> width</span>
				<span style="COLOR: #0000ff">="300"</span>
				<span style="COLOR: #ff0000"> height</span>
				<span style="COLOR: #0000ff">="100"</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">iframe</span>
				<span style="COLOR: #0000ff">&gt;</span>
		</div>
		<p>这个方式没什么好说的，完全OK，就是iframe的边框需要额外设置一下。<br /><br /><br />当然最希望看到的就是类似于下面的代码能早点在主流Browser中支持</p>
		<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee">
				<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">html<br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span>
				<span style="COLOR: #ff0000">xmlns:svg</span>
				<span style="COLOR: #0000ff">="http://www.w3.org/2000/svg"</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">body</span>
				<span style="COLOR: #0000ff">&gt;&lt;</span>
				<span style="COLOR: #800000">p</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">This is an HTML paragraph</span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">p</span>
				<span style="COLOR: #0000ff">&gt;&lt;</span>
				<span style="COLOR: #800000">svg:svg </span>
				<span style="COLOR: #ff0000">width</span>
				<span style="COLOR: #0000ff">="300"</span>
				<span style="COLOR: #ff0000"> height</span>
				<span style="COLOR: #0000ff">="100"</span>
				<span style="COLOR: #ff0000"> version</span>
				<span style="COLOR: #0000ff">="1.1"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">svg:circle </span>
				<span style="COLOR: #ff0000">cx</span>
				<span style="COLOR: #0000ff">="100"</span>
				<span style="COLOR: #ff0000"> cy</span>
				<span style="COLOR: #0000ff">="50"</span>
				<span style="COLOR: #ff0000"> r</span>
				<span style="COLOR: #0000ff">="40"</span>
				<span style="COLOR: #ff0000"> stroke</span>
				<span style="COLOR: #0000ff">="black"</span>
				<span style="COLOR: #ff0000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />stroke-width</span>
				<span style="COLOR: #0000ff">="2"</span>
				<span style="COLOR: #ff0000"> fill</span>
				<span style="COLOR: #0000ff">="red"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">svg:svg</span>
				<span style="COLOR: #0000ff">&gt;&lt;/</span>
				<span style="COLOR: #800000">body</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">html</span>
				<span style="COLOR: #0000ff">&gt;</span>
		</div>
		<p>目前还不行，呵呵。<br /></p>
<img src ="http://www.blogjava.net/carob/aggbug/64450.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/carob/" target="_blank">carob</a> 2006-08-20 22:30 <a href="http://www.blogjava.net/carob/archive/2006/08/20/64450.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>