现在的位置: 首页 > 综合 > 正文

在浏览器绘制图形入门

2013年08月04日 ⁄ 综合 ⁄ 共 1479字 ⁄ 字号 评论关闭

一个ie下的vml和firefox,opera,safari支持的svg的入门示例

1,IE下的vml

 <html xmlns:v="urn:schemas-microsoft-com:vml">

<STYLE>

v\:* { Behavior: url(#default#VML) }

</STYLE>

<body>

<v:roundrect strokecolor="black" fillcolor="white" style="position:relative;left:20;top:5;width:100px;height:40px;z-index:9">

       <v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>

       <v:textbox id="memo" style="font-size:10pt;color:blue;line-height:18px" inset="1,1,1,1">Hello world!<br>Hello VML!</v:textbox>

</v:roundrect>

<v:oval strokecolor="black" fillcolor="white" style="position:relative;left:9;top:20;width:14px;height:10px;z-index:8">

              <v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>

</v:oval>

<v:oval strokecolor="black" fillcolor="white" style="position:relative;left:0;top:35;width:10px;height:8px;Z-index:7">

                     <v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>

</v:oval>

<!--/v:group-->

</body> 

2 SVG示例:

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">        
 <defs>
	  <rect id="rect1" width="200" height="200" fill="red" x="10" y="10" stroke="black" />
	  <circle id="circle1" r="200" fill="blue" stroke="black"  cx="200" cy="200" />
 </defs>
</svg>
<div>
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">        
 <g>
	  <use xlink:href="#rect1" />
 </g>
</svg>
</div>
<br>
<div>
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">        
 <g>            
	  <use xlink:href="#circle1" />
 </g>
</svg>
</div>

抱歉!评论已关闭.