VML编程之------group集合容器.vmlframe图形引用 ----《VML极道教程》原著:沐缘华

最新推荐文章于 2012-08-26 15:35:29 发布

原创

最新推荐文章于 2012-08-26 15:35:29 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图形 #编程 #behavior #vector #button #html

本文深入探讨了VML中的group集合容器及其在图形引用中的应用，详细介绍了如何利用vector、button等元素进行HTML图形编程，为《VML极道教程》的读者提供了实用的技术指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VML极道教程》原著:沐缘华
1章16节:group集合容器

1:group集合容器 - 实例讲解
该标记不是用来输出某种图形的、运行时其本身也不可见，而且也没有专用属性，只有VML通用属性，但却也是非常重要的、特殊的VML标记。它的作用就是充当“类似父或母”的身份将多个“类似儿女成员”的图形囊括其中，然后你可以单独性的描述“父母”，不必一个一个去控制“单个子女”，从而实现“全员子女”继承“父母”遗传的id, class, style (top, left, width, height, rotation, z-index, position, visibility, display), title, href, target, alt, coordsize, coordorigin等等属性。而我们以后实际应用，最重要的是让“子女”继承CSS-style()括号里的属性。
先看一个例子:

 
 
  
  <HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
  
  
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
  
  
 
  
  
<v:oval style="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="white"/>
  
  
<v:rect style="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="yellow"/>
  
  
<v:rect style="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80" fillcolor="red"/>
  
  
<v:arc style="LEFT:200;TOP:200;WIDTH:80;HEIGHT:80" startangle="360" endangle="167" fillcolor="blue"/>
  
  
 
  
  
</v:group>
  
  

 
 

 
 
  
  
  
  
 
 
以上例子也许较难理解，不过我会详细解释。group标记我们用id命名为group1，CSS定义了position:absolute;，表示它是Vector3D的形式输出网页。z-index:1;定义了3D高度为1，left:0;top:0;表示它位于网页的X位置=0、Y位置=0。width:100;height:100、coordsize="100,100"综合我们前面shape多边形那课讲的知识，知道它的大小是100%，也不放大、也不缩小、与coordsize虚拟容器空间大小持平。
在看它包含的4个子女图形标记，均没有position:absolute;的Vector3D输出定义。但运行效果证明，它们继承了group1的position:absolute;定义，同样均以Vector3D形式输出。
在看4个子女的left:;top:;width:;height:;，也许你会问输出距离页面XY位置、宽度、高度效果均是正常值，似乎没有继承ground1？那么你在对比下面的例子，就发现这个例子却继承了。

 
 
  
  <HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
  
  
<v:group id="group1" style='position:absolute;left:200;top:50;z-index:1;width:100;height:100' coordsize="100,100">
  
  
 
  
  
<v:oval style="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="white"/