Thomas Meinike: Aenderung der style-eigenschaften einer svg-zeichnung

Beitrag lesen

Hallo,

Wie die onchange Anweisung ausschauen muß weis ich leider auch nicht.

Hier mal ein Testbeispiel zur Farbaenderung von Kreisen:

kreise.svg:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg">

<circle id="k1" cx="100" cy="50" r="20" style="fill: #F00"/>
  <circle id="k2" cx="220" cy="50" r="30" style="fill: #090"/>
  <circle id="k3" cx="360" cy="50" r="40" style="fill: #00C"/>

</svg>

kreise.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 09/02</title>
<script language="JavaScript" type="text/javascript">
<!--

function NeueFarbe2SVG()
{
  var d,k,f,svgobj;
  d=document.forms[0];
  for(i=0;i<d.elements["kreis"].length;i++)
  {
    if(d.elements["kreis"][i].checked)
    {
      k=d.elements["kreis"][i].value;
      break;
    }
  }
  f=d.elements["farbe"].options[d.elements["farbe"].selectedIndex].value;

if(f!="Auswahl")
  {
    svgobj=document.getElementById("svgkreise").getSVGDocument();
    svgobj.getElementById(k).getStyle().setProperty("fill",f);
  }
}

//-->
</script>
</head>
<body>
<object id="svgkreise" data="kreise.svg" width="500" height="100" type="image/svg+xml">SVG-Objekt - Viewer erforderlich</object>
<form action="">
<select name="farbe" onchange="NeueFarbe2SVG()">
<option value="Auswahl">Farbe</option>
<option value="#F00">rot</option>
<option value="#090">grün</option>
<option value="#00C">blau</option>
</select>
<input type="radio" name="kreis" value="k1" checked>Kreis 1
<input type="radio" name="kreis" value="k2">Kreis 2
<input type="radio" name="kreis" value="k3">Kreis 3
</form>
</body>
</html>

Es ist natuerlich zu bedenken, dass ActiveX-Zugriff auf das SVG-Viewer-Objekt benoetigt wird.

MfG, Thomas