在浏览器绘制图形入门

一个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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值