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