<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
]>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  onload="getSVGDoc(evt);createMenues()">  
  
  <title>SVG-菜单演示程序</title>
  <desc>SVG-Spezifikation in Beispielen</desc>
  <defs>
    <style type="text/css">
      <![CDATA[

      text
      {
      font-family:SimSun
      }
      rect.haupt
      {
        fill: #FFC;
        stroke: #000;
        stroke-width: 2px;

      }
      rect.unter
      {
        fill: #EEF;
        stroke: #000;
        stroke-width: 1px;
      }
      text.haupt
      {
        fill: #00C;
        font-size: 12px;
        text-anchor: middle;
        pointer-events: none;
      }
      text.unter
      {
        fill: #000;
        font-size: 11px;
        text-anchor: middle;
        pointer-events: none;
      }
      a text.unter
      {
        fill: #F00;
        pointer-events: inherit;
      }
      ]]>
    </style>
    <script type="text/javascript">
      <![CDATA[
      var svgdoc,svgroot;
   
      function getSVGDoc(load_evt)
      {
        svgdoc=load_evt.target.ownerDocument;
        svgroot=svgdoc.documentElement;
      }
      function createMenues()
      {
        var menues,hlinks,target,menue_x,menue_y,menue_b,menue_h,haupt_out,haupt_over,unter_out,unter_over,dx,dy;
        var haupt_g,haupt_r,haupt_t,haupt_txt,haupt_s1,haupt_s2,haupt_s3,haupt_s4;
        var unter_g,unter_r,unter_t,unter_txt,unter_s1,unter_s2,unter_s3,unter_s4,unter_s5,unter_s6,unter_a;
        // Arrays fuer die Menuepunkte und die Links
        menues=new Array();
        hlinks=new Array();
        // Vorgaben fuer Positionen und Farben - Anfang
          menue_x=20;        // Menue x (erstes Rechteck)
          menue_y=60;        // Menue y (erstes Rechteck)
          menue_b=100;       // Breite der Rechtecke fuer Haupt- und Untermenues
          menue_h=20;        // Hoehe der Rechtecke fuer Haupt- und Untermenues
          haupt_out="#FFC";  // Mouseout-Farbe der Hauptmenuepunkte (=Grundfarbe, siehe CSS-Klasse rect.haupt)
          haupt_over="#FF0"; // Mouseover-Farbe der Hauptmenuepunkte
          unter_out="#EEF";  // Mouseout-Farbe der Untermenuepunkte (=Grundfarbe, siehe CSS-Klasse rect.unter)
          unter_over="#CFC"; // Mouseover-Farbe der Untermenuepunkte
          dx=50;             // x-Versatz der Menuetexte
          dy=15;             // y-Versatz der Menuetexte
          target="_top";     // Linkziel
        // Schema:
        // menues[0 bis n-1]=new Array("Hauptmenuetext","Untermenuetext_1",...,"Untermenuetext_n");
        // Hier: 3 Hauptmenuepunkte mit 5/3/1 Untermenuepunkten
        // hlinks[0 bis n-1]=new Array("url_1",...,"url_n");
        // wenn kein Link erscheinen soll, einen Leerstring "" angeben
        // Hier: im 1. Untermenue ist Menuepunkt 4, im 2. Untermenue Menuepunkt 1 verlinkt
           menues[0]=new Array("Main","Untermenü 1.1","Untermenü 1.2","Untermenü 1.3","Untermenü 1.4","Untermenü 1.5");
           hlinks[0]=new Array("","","","http://www.163.com","");
           menues[1]=new Array("公司简介","公司历史","产品简介","发展蓝图");
           hlinks[1]=new Array("http://www.history.com","","");
           menues[2]=new Array("客户","客户服务中心");
           hlinks[2]=new Array("http://free.cnyys.com/my/freebird/index.asp");
        // Menuetexte der n Menues und URLs der n Links festlegen - Ende
        // Menuestruktur dynamisch aufbauen - Anfang
        for(i=0;i<menues.length;i++)
        {
          // Hauptmenues mit Eintraegen erzeugen - Anfang
          haupt_g=svgdoc.createElement("g");
          haupt_g.setAttribute("id","men"+parseInt(i+1));
          haupt_r=svgdoc.createElement("rect");
          haupt_r.setAttribute("x",menue_x+i*menue_b);
          haupt_r.setAttribute("y",menue_y);
          haupt_r.setAttribute("width",menue_b);
          haupt_r.setAttribute("height",menue_h);
          haupt_r.setAttribute("class","haupt");
          haupt_s1=svgdoc.createElement("set");
          haupt_s1.setAttribute("attributeName","fill");
          haupt_s1.setAttribute("attributeType","CSS");
          haupt_s1.setAttribute("to",haupt_over);
          haupt_s1.setAttribute("begin","mouseover");
          haupt_s2=svgdoc.createElement("set");
          haupt_s2.setAttribute("attributeName","fill");
          haupt_s2.setAttribute("attributeType","CSS");
          haupt_s2.setAttribute("to",haupt_over);
          haupt_s2.setAttribute("begin","umen"+parseInt(i+1)+".mouseover");
          haupt_s3=svgdoc.createElement("set");
          haupt_s3.setAttribute("attributeName","fill");
          haupt_s3.setAttribute("attributeType","CSS");
          haupt_s3.setAttribute("to",haupt_out);
          haupt_s3.setAttribute("begin","mouseout");
          haupt_s4=svgdoc.createElement("set");
          haupt_s4.setAttribute("attributeName","fill");
          haupt_s4.setAttribute("attributeType","CSS");
          haupt_s4.setAttribute("to",haupt_out);
          haupt_s4.setAttribute("begin","umen"+parseInt(i+1)+".mouseout");
          haupt_t=svgdoc.createElement("text");
          haupt_t.setAttribute("x",menue_x+i*menue_b+dx);
          haupt_t.setAttribute("y",menue_y+dy);
          haupt_t.setAttribute("class","haupt");
          haupt_txt=svgdoc.createTextNode(menues[i][0]);
          haupt_r.appendChild(haupt_s1);
          haupt_r.appendChild(haupt_s2);
          haupt_r.appendChild(haupt_s3);
          haupt_r.appendChild(haupt_s4);
          haupt_t.appendChild(haupt_txt);
          haupt_g.appendChild(haupt_r);
          haupt_g.appendChild(haupt_t);
          // Hauptmenues mit Eintraegen erzeugen - Ende
          // Gruppe fuer die Untermenuepunkte des i-ten Hauptmenues - Anfang
          unter_g=svgdoc.createElement("g");
          unter_g.setAttribute("id","umen"+parseInt(i+1));
          unter_g.setAttribute("style","display: none");
          unter_s1=svgdoc.createElement("set");
          unter_s1.setAttribute("attributeName","display");
          unter_s1.setAttribute("attributeType","CSS");
          unter_s1.setAttribute("to","block");
          unter_s1.setAttribute("begin","men"+parseInt(i+1)+".mouseover");
          unter_s2=svgdoc.createElement("set");
          unter_s2.setAttribute("attributeName","display");
          unter_s2.setAttribute("attributeType","CSS");
          unter_s2.setAttribute("to","none");
          unter_s2.setAttribute("begin","men"+parseInt(i+1)+".mouseout");
          // Gruppe fuer die Untermenuepunkte des i-ten Hauptmenues - Ende
          // Untermenuepunkte fuer das i-te Hauptmenue - Anfang
          for(j=1;j<menues[i].length;j++)
          {
            unter_r=svgdoc.createElement("rect");
            unter_r.setAttribute("x",menue_x+i*menue_b);
            unter_r.setAttribute("y",menue_y+j*menue_h);
            unter_r.setAttribute("width",menue_b);
            unter_r.setAttribute("height",menue_h);
            unter_r.setAttribute("class","unter");
            if(hlinks[i][j-1]=="")unter_r.setAttribute("onclick","MenueAktion('"+parseInt(i+1)+"."+j+"')");
            unter_s3=svgdoc.createElement("set");
            unter_s3.setAttribute("attributeName","fill");
            unter_s3.setAttribute("attributeType","CSS");
            unter_s3.setAttribute("to",unter_over);
            unter_s3.setAttribute("begin","mouseover");
            unter_s4=svgdoc.createElement("set");
            unter_s4.setAttribute("attributeName","fill");
            unter_s4.setAttribute("attributeType","CSS");
            unter_s4.setAttribute("to",unter_out);
            unter_s4.setAttribute("begin","mouseout");
            unter_s5=svgdoc.createElement("set");
            unter_s5.setAttribute("attributeName","fill");
            unter_s5.setAttribute("attributeType","CSS");
            unter_s5.setAttribute("to",unter_over);
            unter_s5.setAttribute("begin","link"+i.toString()+j.toString()+".mouseover");
            unter_s6=svgdoc.createElement("set");
            unter_s6.setAttribute("attributeName","fill");
            unter_s6.setAttribute("attributeType","CSS");
            unter_s6.setAttribute("to",unter_out);
            unter_s6.setAttribute("begin","link"+i.toString()+j.toString()+".mouseout");
          
            unter_t=svgdoc.createElement("text");
            unter_t.setAttribute("x",menue_x+i*menue_b+dx);
            unter_t.setAttribute("y",menue_y+j*menue_h+dy);
            unter_t.setAttribute("class","unter");
            unter_txt=svgdoc.createTextNode(menues[i][j]);
            unter_a=svgdoc.createElement("a");
            unter_a.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",hlinks[i][j-1]);
            unter_a.setAttribute("target",target);
            unter_a.setAttribute("id","link"+i.toString()+j.toString());
            unter_a.appendChild(unter_t);
            unter_r.appendChild(unter_s3);
            unter_r.appendChild(unter_s4);
            unter_r.appendChild(unter_s5);
            unter_r.appendChild(unter_s6);
            unter_t.appendChild(unter_txt);
            
            unter_g.appendChild(unter_s1);
            unter_g.appendChild(unter_s2);
            unter_g.appendChild(unter_r);
            if(hlinks[i][j-1])unter_g.appendChild(unter_a);
            else unter_g.appendChild(unter_t);
            haupt_g.appendChild(unter_g);
          }
          // Untermenuepunkte fuer das i-te Hauptmenue - Ende
          // Hauptmenue mit Untermenues in den DOM-Baum einhaengen
          svgroot.appendChild(haupt_g);
        }
        // Menuestruktur dynamisch aufbauen - Ende
      }
      function MenueAktion(men)
      {
        alert("Menüpunkt "+men+" wurde geklickt.");
      }
      ]]>
    </script>
  </defs>
  <text style="fill:red;" font-size="32" font-family="SimSun" x="350" y="50" width="200" height="30">
    欢迎光临本站</text>
</svg>