josef stebegg: svg und javascript

Hallo,

habe von Euch ( TM 9/02 ) folgenden script bekommen mit dem ich ueber ein (navigations) frame das Aussehen von Elementen einer svg datei aendern kann.

function NeueFarbe2SVG()
  {
  var k,svgobj;
  d=document.forms[1];
  k=d.elements["nebenstr"].options[d.elements["nebenstr"].selectedIndex].value;

if(k!="Auswahl")
  {
    svgobj=parent.bild.document.getElementById("g1_map").getSVGDocument();
    svgobj.getElementById(k).getStyle().setProperty("visibility","visible");
    svgobj.getElementById(k).getStyle().setProperty("fill","#ff0000");
  }
  }

<body>

<form action=""> 
 <select name="nebenstr" onchange="NeueFarbe2SVG()" class="sel2">
 <option value="#" selected="selected"> Straßen u. Plätze :</option>
 <option value="#">------------------------------</option>
   <option value="adm" class="zn"> Admonderg. </option>
   ...............
  usw.

In der svg:
 ...........
 <text id="adm" class="txt20ec"><textPath xlink:href="#admonderg" startOffset="0">Admonderg</textPath></text>
 .......
 usw.

Optimal waere es noch, wenn bei jeder neuen Auswahl die vorhergende wieder in den urzustand zurueckfaellt. Geht das auch noch bitte ? (ohne ActiveX ?!)

Eine allgemeine Frage habe ich hier auch noch. Geht das alles (bei svg) nur mehr mit dem ie6 ?  Habe das einmal mit dem nn6 probiert aber da werden nicht einmal die Haeckhen bei der Checkbox angezeigt.

mfG
josef

  1. Hallo Josef,

    Eine allgemeine Frage habe ich hier auch noch. Geht das alles (bei svg) nur mehr mit dem ie6 ?  Habe das einmal mit dem nn6 probiert aber da werden nicht einmal die Haeckhen bei der Checkbox angezeigt.

    Mit dem Browser hat es nicht zu tun. Zur Zeit brauchst du den Plug in von Adobe um SVG Grafiken in den Browser darzustellen.

    Grüße
    Thomas

    1. Hallo,

      Mit dem Browser hat es nicht zu tun. Zur Zeit brauchst du den Plug in von Adobe um SVG Grafiken in den Browser darzustellen.

      Danke fuer die Antwort.

      Da habe ich warscheinlich bei der installation etwas falsch gemacht.

      mfG
      josef

  2. Hallo,

    Optimal waere es noch, wenn bei jeder neuen Auswahl die vorhergende wieder in den urzustand zurueckfaellt. Geht das auch noch bitte ? (ohne ActiveX ?!)

    Das sollte doch mit einigen if-else-Abfragen und Variablen, die den Urzustand vermerken, machbar sein.

    Eine allgemeine Frage habe ich hier auch noch. Geht das alles (bei svg) nur mehr mit dem ie6 ?  Habe das einmal mit dem nn6 probiert aber da werden nicht einmal die Haeckhen bei der Checkbox angezeigt.

    Mein Beispiel funktioniert auch mit Netscape 6.x problemlos, d. h. getSVGDocument() greift auch dort auf das SVG-Objekt zu, siehe:
    http://www.styleassistant.de/test/kreise3.htm.

    Probleme kann es jedoch mit Netscape 7.x und anderen Mozilla-basierten Browsern und dem ASV-PlugIn geben. IFRAMEs statt OBJECTs sind ein moeglicher Workaround, siehe:
    http://www.styleassistant.de/tips/tip91.htm.

    MfG, Thomas

    1. Hallo.

      Danke fuer die Antwort.

      Das sollte doch mit einigen if-else-Abfragen und Variablen, die den Urzustand vermerken, machbar sein.

      javascript ist eine geheimwissenschaft. Scriptbeispiele die das gleiche bewirken sind oft so unterschiedlich aufgebaut das sich fuer einen Angaenger keine lern- bzw synergieerfolge ergeben.
      Koennte mir vorstellen das am Anfang alle Farbwerte auf #999999 gesetzt werden, oder es gibt  ein vordefiniertes "old".

      Mein Beispiel funktioniert auch mit Netscape 6.x problemlos, d. h. getSVGDocument() greift auch dort auf das SVG-Objekt zu, siehe:
      http://www.styleassistant.de/test/kreise3.htm.

      Probleme kann es jedoch mit Netscape 7.x und anderen Mozilla-basierten Browsern und dem ASV-PlugIn geben. IFRAMEs statt OBJECTs sind ein moeglicher Workaround, siehe:
      http://www.styleassistant.de/tips/tip91.htm.

      nn7 habe ich noch gar nicht aber bei nn6 habe ich warscheinlich bei der installation etwas falsch gemacht.

      mfG
      josef

      1. Hallo,

        javascript ist eine geheimwissenschaft. Scriptbeispiele die das gleiche bewirken sind oft so unterschiedlich aufgebaut das sich fuer einen Angaenger keine lern- bzw synergieerfolge ergeben.

        Es gibt meistens mehrere Wege, um ein bestimmtes Ziel zu erreichen. Das ist IMHO kein Nachteil.

        Koennte mir vorstellen das am Anfang alle Farbwerte auf #999999 gesetzt werden, oder es gibt  ein vordefiniertes "old".

        Man kann natuerlich Default-Werte setzen. Ich habe mein Beispiel mal etwas angepasst und die Ausgangsfarben der Kreise im Array kf[] abgelegt:

        <script language="JavaScript" type="text/javascript">
        <!--

        var d,k,f,kf,s;
        kf=new Array("#F00","#090","#00C");

        function NeueFarbe()
        {
          d=document.forms[0];

        f=d.elements["farbe"].options[d.elements["farbe"].selectedIndex].value;
          k=d.elements["kreis"].options[d.elements["kreis"].selectedIndex].value;
          s=d.elements["kreis"].selectedIndex;

        if(f!="Auswahl" && k!="Auswahl")
          {
            for(i=1;i<=kf.length;i++)
            {
              if(i==s)window.farbe(f,k);
              else window.farbe(kf[i-1],"k"+i);
            }
          }
        }

        //-->
        </script>

        In der Funktion NeueFarbe() werden die jeweils nicht von der Auswahl betroffenen Kreise auf ihre Ausgangsfarben zurueck gesetzt.

        Das komplette Beispiel liegt unter http://www.styleassistant.de/test/kreise4.htm.

        nn7 habe ich noch gar nicht aber bei nn6 habe ich warscheinlich bei der installation etwas falsch gemacht.

        Es reicht voellig aus, die Dateien NPSVG3.dll und NPSVG3.zip aus dem Ordner der ASV-Installation (\WIN[9x|NT]\System[32]\Adobe\SVG Viewer 3.0) nach \Netscape\Plugins zu kopieren und den Browser neu zu starten (analog bei Netscape 7 und Mozilla, wobei dort der Absturz bei Verwendung von object lauert).

        MfG, Thomas

        1. Hallo,

          Danke fuer die ausfuehrliche Erklaerung und den Tip fuer die viewer-installation.

          Man kann natuerlich Default-Werte setzen. Ich habe mein Beispiel mal etwas angepasst und die Ausgangsfarben der Kreise im Array kf[] abgelegt:

          Da muß ich mich erst ein bischen einarbeiten. Hoffe durch probieren wieder auf meinen speziellen Fall zu kommen. Beim Link kann man aber noch nichts sehen (jedenfalls keine farbaenderung bei den Kreisen) Aber meinen Fall kann man glaube ich so gar nicht testen. Ich werde einmal versuchen Deinen Script bei mir einzubauen und melde mich dann (mit einer Frage !) wieder.

          mfG
          josef

          1. Hallo,

            Beim Link kann man aber noch nichts sehen (jedenfalls keine farbaenderung bei den Kreisen)

            Mit Netscape 6.1 funktioniert das Beispiel bei mir online und offline, im IE nur offline (wegen ActiveX-Zugriffsrechten).

            MfG, Thomas

        2. Hallo,
          (zweite Antwort)

          Ohne recht zu wissen was hier das array  (ist wegen nur einer Farbe  bei mir wahrscheinlich auch nicht notwendig) und kf.length bedeuten
          habe ich einíge Sachen probiert.
          Da ich ja nur ein Auswahlmenue habe, kann ich analog zum ersten Mal auf eine Variable verzichten.

          Ich habe wie hier beim Ausgangsscript
          (schreibe es noch einmal her)

          function NeueFarbe2SVG()
            {
            var k,svgobj;
            d=document.forms[1];
            k=d.elements["nebenstr"].options[d.elements["nebenstr"].selectedIndex].value;

          if(k!="Auswahl")
            {
              svgobj=parent.bild.document.getElementById("g1_map").getSVGDocument();
              svgobj.getElementById(k).getStyle().setProperty("visibility","visible");
              svgobj.getElementById(k).getStyle().setProperty("fill","#ff0000");
            }
            }

          ja nur "nebenstr".

          Ich kann mir fuer meinen Anwendungsfall nicht vorstellen daß ich ohne diese letzten drei  Zeilen (svgobj.....) auskomme. Blos wie einbauen.

          Ein von vielen erfolglosen Versuchen.

          var d,k,kf,s.svgobj;

          function NeueFarbe2SVG()
          {
            d=document.forms[1];

          k=d.elements["nebenstr"].options[d.elements["nebenstr"].selectedIndex].value;
            s=d.elements["nebenstr"].selectedIndex;
            svgobj=parent.bild.document.getElementById("g1_map").getSVGDocument();

          if(k!="Auswahl")
            {
              for(i=1;i<=kf.length;i++)
              {
                     if(i==s)svgobj.getElementById(k).getStyle().setProperty("fill","#ff0000");
               else svgobj.getElementById(kf[i-1],"k"+i).getStyle().setProperty("fill","#999");
              }
            }
          }

          //-->
          </script>

          mfG
          josef

          der aktuelle Stand (ohne dem erweiterten script)
          http://www.innonet.at/~jstebegg/graz01.html
          funktioniert bis jetzt jedenfalls sehr gut.

          1. Hallo,

            Ohne recht zu wissen was hier das array  (ist wegen nur einer Farbe  bei mir wahrscheinlich auch nicht notwendig) und kf.length bedeuten
            habe ich einíge Sachen probiert.

            Sorry, aber ohne grundlegende JavaScript-Kenntnisse kann Deine Aufgabe nur unzureichend geloest werden bzw. wir reden/schreiben dauernd aneinander vorbei ...

            MfG, Thomas

            1. Hallo

              Sorry, aber ohne grundlegende JavaScript-Kenntnisse kann Deine Aufgabe nur unzureichend geloest werden bzw. wir reden/schreiben dauernd aneinander vorbei ...

              Da hast Du natuerlich recht.
               Es ist aber schwer aus den buechern etwas zu lernen. Bis zum hallo welt script sind ja alle gleich aber dann kocht jeder seine eigene Suppe.

              Dieses zusaetzliche feature ist ja nicht unbedingt notwendig.
              Danke jedenfalls fuer das bisherige.

              mfG
              josef