参照一下这块~
<?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>
[返回] 计算机科学论坛 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → [求助]如何用css控制链接的颜色
(订阅本版)
2005/10/5 20:48:00
新浪微博
[求助]如何用css控制链接的颜色