豆沙包
          

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

          


          

	

          導航
          


	
          
	
          
		
          <2009年12月>
          
	
          日一二三四五六
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789
          

          

	

          統計
          


	
	

          常用鏈接
          


          留言簿(1)
          


		
          隨筆分類
          
		
				
			
	
		
          隨筆檔案
          
		
				
			
	
		
          文章分類
          
		
				
			
	
		
          收藏夾
          
		
				
			
	
		
          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 閱讀(2967) 評論(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了）  回復  更多評論
				  
			
          
		

          




          





          


          

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


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          



    







          
        
	




主站蜘蛛池模板：
铁岭县|
西安市|
北海市|
都兰县|
社旗县|
淮安市|
新竹县|
井冈山市|
赤水市|
探索|
克山县|
浦北县|
丰都县|
乌苏市|
和平区|
木里|
玛曲县|
乐亭县|
饶阳县|
武平县|
静乐县|
汾阳市|
璧山县|
温州市|
乌鲁木齐县|
灌云县|
南康市|
康乐县|
略阳县|
建德市|
湟中县|
西乌珠穆沁旗|
兴山县|
琼结县|
临泉县|
伊川县|
资源县|
渝北区|
宁蒗|
东乡|
中西区|