您的位置：首页 > 运维架构

VML实现web topo原型 (2)-基本元素

2010-03-09 15:30 162 查看

这个是webtop页面的一部分。展示了vml 中的line、textpath元素的用法。
结合vml极道教程，可以完成初步入门。

<!-- legengd.html
1.显示图例功能
2.显示文字、线
-->
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
图例
</title>
</head>

<STYLE>
v/:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<body bgcolor="#ffffff">
<!--创建一个group,指定位置,大小  -->
<v:group ID="bandwidthLegend" style="position:absolute;Z-INDEX:2;WIDTH:200px;HEIGHT:200px;top:125;left:50" >

<!--文本路径，textpath必须依赖于path和一个载体shape, 这里为line -->
<v:line id="textforPE-7"  style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,-91" to="500,-90" strokecolor="#004382">
<!-- t代表true ,f代表false-->
<v:path textpathok="t"/>
<!--fitpath代表是否按载体进行填充，颜色从载体继承-->
<v:textpath on="t" fitpath="f" string="电路带宽图例" style="Z-INDEX:100;font-family: '宋体';
font-size: 14px;
color: #004382;
background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体';
font-size: 14px;
color: #004382;
background-repeat: no-repeat;"/>
</v:path>
</v:line>

<!--画一条线，线宽1,注意以/>结尾-->
<v:line id="textforPE-7" strokeweight="1px"  style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,0" to="200,0" strokecolor="#004382" />
<!--文本路径，显示数字带宽范围-->
<v:line id="textforPE-7"  style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="-3964.0,0" to="5520.0,1" strokecolor="#004382">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="f" string="            <1000000 " style="Z-INDEX:100;font-family: '宋体';
font-size: 12px;
color: #004382;
background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体';
font-size: 12px;
color: #004382;
background-repeat: no-repeat;"/>

</v:line>

<!--画线2，线宽2,注意以/>结尾-->
<v:line id="textforPE-7" strokeweight="2px"  style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,70" to="200,70" strokecolor="#004382" />
<v:line id="textforPE-7"  style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="-3964.0,70" to="5520.0,71" strokecolor="#004382">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="f" string="    (1000000,9000000)" style="Z-INDEX:100;font-family: '宋体';
font-size: 12px;
color: #004382;
background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体';
font-size: 12px;
color: #004382;
background-repeat: no-repeat;"/>

</v:line>

<!--画线3，线宽4,注意以/>结尾-->
<v:line id="textforPE-7" strokeweight="4px"  style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,140" to="200,140" strokecolor="#004382" />
<v:line id="textforPE-7"  style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="-3964.0,140" to="5520.0,141" strokecolor="#004382">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="f" string="   (9000000,24000000)" style="Z-INDEX:100;font-family: '宋体';
font-size: 12px;
color: #004382;
background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体';
font-size: 12px;
color: #004382;
background-repeat: no-repeat;"/>

</v:line>

</v:group>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航