天天看點

MS VML示例

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

<style>

v:* { behavior: url(#default#vml) }

</style>

<body>

<!---邊櫃-->

<v:group id="group1" style="width:500pt;height:500pt;" coordorig="0,0" coordsize="1000,1000">

<v:line from="0,0" to="500,0" style="z-index:8;position:absolute" strokeweight="1pt">

</v:line>

<v:line from="500,0" to="500,500" style="z-index:8;position:absolute" strokeweight="1pt">

</v:line>

<v:line from="500,500" to="0,500" style="z-index:8;position:absolute" strokeweight="1pt">

</v:line>

<v:line from="0,500" to="0,0" style="z-index:8;position:absolute" strokeweight="1pt">

</v:line>

<!--坐标軸-->

<!--x-->

<v:line from="100,400" to="450, 400" style="z-index:8;position:absolute" strokeweight="1pt">

<v:stroke startarrow="" endarrow="classic" dashstyle="solid" color="red" />

</v:line>

<!--y-->

<v:line from="100,400" to="100, 50" style="z-index:8;position:absolute" strokeweight="1pt">

<v:stroke startarrow="" endarrow="classic" dashstyle="solid" color="red"/>

</v:line>

<!--标記x軸-->

<v:shape style="positi relative; width: 100px; height: 100px; left:420; top:400">

<v:textbox>

<f size="2" >

x

</f

</v:textbox>

</v:shape>

<!--标記y軸-->

<v:shape style="positi relative; width: 100px; height: 100px; left:100; top:50">

<v:textbox>

<f size="2" >

y

</f

</v:textbox>

</v:shape>

<!--标記原點坐标-->

<v:shape style="positi relative; width: 100px; height: 100px; left:50; top:400">

<v:textbox>

<f size="2" >

o(0, 0)

</f

</v:textbox>

</v:shape>

<!--标記x軸刻度-->

<v:line from="200,395" to="200,405" style="z-index:8;position:absolute" strokeweight="3pt">

</v:line>

<v:line from="300,395" to="300,405" style="z-index:8;position:absolute" strokeweight="3pt">

</v:line>

<v:line from="400,395" to="400,405" style="z-index:8;position:absolute" strokeweight="3pt">

</v:line>

<v:shape style="positi relative; width: 100px; height: 100px; left:180; top:400">

<v:textbox>

<f size="2" >

1

</f

</v:textbox>

</v:shape>

<v:shape style="positi relative; width: 100px; height: 100px; left:280; top:400">

<v:textbox>

<f size="2" >

2

</f

</v:textbox>

</v:shape>

<v:shape style="positi relative; width: 100px; height: 100px; left:380; top:400">

<v:textbox>

<f size="2" >

3

</f

</v:textbox>

</v:shape>

<!--标記y軸刻度-->

<v:line from="95,300" to="105,300" style="z-index:8;position:absolute" strokeweight="3pt">

</v:line>

<v:line from="95,200" to="105,200" style="z-index:8;position:absolute" strokeweight="3pt">

</v:line>

<v:line from="95,100" to="105,100" style="z-index:8;position:absolute" strokeweight="3pt">

</v:line>

<v:shape style="positi relative; width: 100px; height: 100px; left:95; top:280">

<v:textbox>

<f size="2" >

1

</f

</v:textbox>

</v:shape>

<v:shape style="positi relative; width: 100px; height: 100px; left:95; top:180">

<v:textbox>

<f size="2" >

2

</f

</v:textbox>

</v:shape>

<v:shape style="positi relative; width: 100px; height: 100px; left:95; top:80">

<v:textbox>

<f size="2" >

3

</f

</v:textbox>

</v:shape>

<!--折線測試-->

<v:polyline id="poly1" style="visibility:hidden;z-index:9" filled=f strokecolor=blue strokeweight=1.5pt points="10,20 20,11 23,43 44,23 102,33 50,120"/>

</v:group>

<input type="butt value="ccc"

<script language="javascript">

function test()

{

poly1.style.visibility='';

}

</script>

</body>

轉載于:https://blog.51cto.com/sunlilei/4770

繼續閱讀