nicht angemeldet
Aenderung der style-eigenschaften einer svg-zeichnung
Hallo,
Von einer Europakarte habe ich wie man Elemente einer SVG Zeichnung (durch ein externes javascript) aus- und einblendet.
Jetzt moechte ich aber auch noch daß sich beim Anklicken (Auswaehlen) einer Straße in einem pulldownmenue die Farbe der Straße im Plan aendert. Habe versucht das bis jetzt mir bekannte zusammen zu mischen, aber das war leider nur ein herumraten. Dacher leider auch keine Vorarbeit. Kann nur den Link anbieten um was es geht.
http://www.innonet.at/~jstebegg/g1-stmk.html
(wahrscheinlich ie6 und adobe svg-viewer3 erforderlich)
Bin fuer jede weiterfuehrende Information dankbar.
gruß
josef
-
Hallo,
Jetzt moechte ich aber auch noch daß sich beim Anklicken (Auswaehlen) einer Straße in einem pulldownmenue die Farbe der Straße im Plan aendert. Habe versucht das bis jetzt mir bekannte zusammen zu mischen, aber das war leider nur ein herumraten. Dacher leider auch keine Vorarbeit. Kann nur den Link anbieten um was es geht.
http://www.innonet.at/~jstebegg/g1-stmk.html
Du verwendest:
svgobj.setAttribute('style','visibility:hidden');Schreibe also den Farbwert (z. B. fuer die Eigenschaft fill) hinter visibility.
objekt.getStyle().setProperty("fill","#FFFFCC");
Einzelne Style-Eigenschaften lassen sich mittels setProperty()-Methode setzen:
objekt.getStyle().setProperty("fill","#ABCDEF");MfG, Thomas
-
Hallo,
Danke fuer Deine Hilfe.
"Du verwendest.." Ich wuerde sagen, ich konnte es nicht falsch abschreiben.
Bei Deiner Vorlage ist mir das schon gelungen.(Die Zeilen nach if und else sind nur eine Auswahl von Versuchen)
function farbe_elem (checkbox, element_name){
var svgobj;
var svgdoc = document.printable_map.getSVGDocument();
svgobj = svgdoc.getElementById(element_name);
if (!checkbox.checked)
{ svgobj.getStyle().setProperty("fill","#FFFFCC"); }
else
{ svgobj.getStyle().setProperty('style','visibility:visible;fill:#FFFFCC'); }
}Obwohl ich das sicher auch noch brauchen werde (vielleicht schaut es besser aus wenn ich bei den strassen und sites von hellgrau auf farbe wechsle) wuerde ich, wenn ich es fuer die einzellnen Objekte verwende ebensoviele kaestchen brauchen.
Ich muß (muesste) dacher wie schon angedeutet ein Pulldownmenue verwenden.
Funktion:
function farbe_elem (select, option){
...
if (!select.option)...???Wie die onchange Anweisung ausschauen muß weis ich leider auch nicht.
<select onchange="ElementById=...........">???
.....
<option value="paulus" class="d1">C2 .... Paulustor</option>
usw. ???
SVG:
<g id="paulus">
<path id="paulustor" class="kunst" d="M922 508 ......... 932 491 z"/></g>Kann auch sein das es ueberhaupt nicht geht.
mfG
josef-
Hallo,
{ svgobj.getStyle().setProperty('style','visibility:visible;fill:#FFFFCC'); }
}Nein, setProperty() bezieht sich auf _einzelne_ Style-Eigenschaften wie fill, stroke, opacity, visibility, ..., aber nicht auf das Attribut style selbst!
Verwende alternativ setAttribute():
objekt.setAttribute('style','prop_1:value_1;...;prop_x:value_x');Wie die onchange Anweisung ausschauen muß weis ich leider auch nicht.
<select onchange="ElementById=...........">???Rufe onchange Deine Funktion auf und uebergib die benoetigten Parameter, z. B. eine ID, welche dann in der Funktion via getElementById()-Methode weiter verarbeitet wird.
MfG, Thomas
-
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
-
Hallo,
Danke fuer Deine beiden Antworten.
Zu 1: Kannst Du mir bitte noch einmal die ganze Funktion hinschreiben oder genuegt es wenn ich blos die Zeile:
svgobj.getStyle().setProperty('style','visibility:visible;fill:#FFFFCC');
durch
objekt.setAttribute('style','prop_1:value_1;...;prop_x:value_x');
ersetzte. (natuerlich mit den entsprechenden Werten fuer prop u. value)
Das ist alles sehr neu, da muesste ich sonst wieder probieren und raten.Zu 2: Ich muß das zuerst auf einem anderen Computer ausprobieren (hier habe ich nur den Internetzugang)
Das mit dem ActiveX-Zugriff koennte noch ein Hindernis werden (Ich habe es jedenfalls bis jetzt bei mir ausgeschalten)Inzwischen habe ich die selfhtml8 documentation auch noch einmal durchgeschaut (obwohl ich bei den viele Moeglichkeiten oft nicht mehr weis was ich eigentlich wollte).
Unter: Javascript/DOM , 0ptions ,Value
habe ich das gefunden.function CheckAuswahl() {
for(i=0;i<document.Testform.Auswahl.length;++i)
if(document.Testform.Auswahl.options[i].selected == true)
alert(document.Testform.Auswahl.options[i].value);
}<form name="Testform" action="">
<select name="Auswahl" size="1" onChange="CheckAuswahl()">
<option value="paulustor">Paulustor</option>
<option value="Dom">Dom</option>
<option value="Burg">Burg</option>
<option value="Palais">Palais</option>
<option value="Oper">Oper</option>
</select>
</form>Wenn man da vielleicht anstelle der alert-zeile von den vorigen funktionen etwas einbauen koennte ?
mfG
josef-
Hallo,
Zu 1: Kannst Du mir bitte noch einmal die ganze Funktion hinschreiben oder genuegt es wenn ich blos die Zeile:
svgobj.getStyle().setProperty('style','visibility:visible;fill:#FFFFCC');
durch
objekt.setAttribute('style','prop_1:value_1;...;prop_x:value_x');
ersetzte. (natuerlich mit den entsprechenden Werten fuer prop u. value)Ja, entweder:
objekt.setAttribute('style','visibility:visible;fill:#FFFFCC');
oder mit zwei Zeilen
svgobj.getStyle().setProperty('visibility','visible');
svgobj.getStyle().setProperty('fill','#FFFFCC');wobei letztere Methode IMHO zu bevorzugen ist, da nur einzelne Style-Eigenschaften ueberschrieben werden, dei der ersteren dagegen der komplette Style ersetzt wird.
Im Einsatz sind diese Methoden hier zu sehen:
http://www.styleassistant.de/tips/tip80.htm
http://www.styleassistant.de/tips/tip81.htmUnter: Javascript/DOM , 0ptions ,Value
habe ich das gefunden.function CheckAuswahl() {
for(i=0;i<document.Testform.Auswahl.length;++i)
if(document.Testform.Auswahl.options[i].selected == true)
alert(document.Testform.Auswahl.options[i].value);
}Das zeigt den gerade ausgewaehlten Wert an, ist aber ansonsten nur eine andere Schreibweise der von mir genannten Zugriffsmethode ueber den selectedIndex. Das ==true ist nicht einmal noetig.
MfG, Thomas
-
Hallo,
Danke fuer die spaete Nachricht.
Die Links habe mir noch nicht angeschaut.
Das zeigt den gerade ausgewaehlten Wert an, ist aber ansonsten nur eine andere Schreibweise der von mir genannten Zugriffsmethode ueber den selectedIndex. Das ==true ist nicht einmal noetig.
Die Aehnlichkeit ist mir zwar auch aufgefallen. Was jetzt genau noch zu aendern ist weis ich natuerlich nicht. Ich probiere zwar selber immer neue Kombinationen, aber das ist eben mehr ein Raten.
Der einzige javscript(grund)-kurs den ich gefunden habe kostet 320 Euro (vier Abende).Ein schoenes Beispiel das mit den Kreisen. Aber hier habe ich auch noch die Checkboxen, und die selectauswahl ist auch etwas anders.
(Wegen activeX hat mein computer jedenfalls nicht gemeckert.)mfG
josef -
Hallo,
2.Antwort zu gestern abend (ich sitze hier in einem internetcafe).
Deine homepage habe ich natuerlich auch auf meiner faroritenliste.
Die beiden Beispiele (hier wird ein Laufzeitfehler angezeigt (aktivX ?!)) waren mir zum Abschreiben noch zu schwierig. Vielleicht kann ich noch bei genauerem Studium was davon fuer meinen Fall verwenden.mfG
JosefFalls Dir zu dem pulldownmenue nichts mehr einfaellt, danke ich Dir jedenfalls noch einmal fuer das bisherige. Gelernt habe ich auf jedenfall etwas.
-
Hallo,
Die beiden Beispiele (hier wird ein Laufzeitfehler angezeigt (aktivX ?!)) waren mir zum Abschreiben noch zu schwierig. Vielleicht kann ich noch bei genauerem Studium was davon fuer meinen Fall verwenden.
Du meinst kreise.htm und kreise.svg? Offline funktioniert das, online kommt leider nur "Unbekannter Name" - auch mit den unsichersten Einstellungen ...
Falls Dir zu dem pulldownmenue nichts mehr einfaellt, danke ich Dir jedenfalls noch einmal fuer das bisherige. Gelernt habe ich auf jedenfall etwas.
Was soll bei Dir anders laufen als bei meinem Farben-Menue zu den Kreisen?
MfG, Thomas
-
Hallo,
Entschuldige, das "wenn Dir zu den Pulldown nichts mehr... " ist sowieso ein schlechtes Deutsch.
Ich habe das schnell in einem Internetcafe geschrieben weil ich Deine Online Beispiele (80,81) nicht auf meinen Internetcomputer anschauen kann (win 95 und svg-viewer vertraegt sich scheinbar nicht). Es ist zwar glaube ich alles angezeigt worden, aber zwischendurch ist soetwas wie eine javascript-runtime error Anzeige aufgetaucht. Das nur als zusatzliche Information weil Du einmal etwas von aktiveX geschrieben hast.Mit dem genauen Studium meinte ich hier in erster linie trick 80 u. 81.
Deine beiden Beispiele kreise.htm und kreise.svg? habe ich vom forum kopiert und auf meinen Arbeitskomputer (mit win 98 u, adobe svgviewer3) uebertragen.
Soweit zu meiner Arbeitsumgebung.Bei javascript geht es ja um zwei Dinge.
Bei meinem grazplan werden ja durch chekboxen "layer" aus- und eingeschalten. Den script konnte ich von einer hompage 1:1 abschreiben (nano).Nun habe ich aber auch zwei pulldownmenues mit Straßennamen und besonderen Gebaeuden. Da wollte ich das beim Anklicken bzw Auswaehlen eines Eintrages <option.....> dieser (z.B.) Straßenname seine Farbe im Plan aendert.
Deine erster Hilfe war ja dann in Richtung mit checkboxen die Farbe zu Aendern. Das ist wie ich schon geschrieben habe, vielleicht noch besser als aus- und einschalten.
Was Deine Antwort auf "Kannst Du mir bitte noch einmal die ganze Funktion hinschreiben" betrifft. Das mit dem pulldownmenu hat mich nun aufgehalten hier weiter zu arbeiten.Deine kreis-beispiele mit dem Auswahlfeld (form-selekt bzw pulldownmenue) und den checkboxen sind doch ein zwischending. Fuer die noetigen Anderungen (ohne checkboxen etc.) fehlt mir aber voellig das Wissen.
Zumindest hoffe ich das ich mich wenigstens klar genug ausgedrueckt habe.
mfG
josef-
Hallo,
Ich habe das schnell in einem Internetcafe geschrieben weil ich Deine Online Beispiele (80,81) nicht auf meinen Internetcomputer anschauen kann (win 95 und svg-viewer vertraegt sich scheinbar nicht). Es ist zwar glaube ich alles angezeigt worden, aber zwischendurch ist soetwas wie eine javascript-runtime error Anzeige aufgetaucht. Das nur als zusatzliche Information weil Du einmal etwas von aktiveX geschrieben hast.
Der Adobe SVG Viewer 3.0 ist offiziell erst ab Win98 gedacht, ich habe das Teil aber auch schon unter Win95b erfolgreich installiert.
Wenn in den Beispielen Scriptfehler auftreten, dann ist vermutlich eine aeltere Viewerversion vorhanden (der ASV 2 wird z. B. vom Acrobat Reader 5.0x mitgebracht).Die Scripts sind uebrigens in den SVG-Dokumenten eingebettet, es wird also nicht aus dem HTML-Code auf SVG-Inhalte zugegriffen - wie von Dir beabsichtigt!
Was Deine Antwort auf "Kannst Du mir bitte noch einmal die ganze Funktion hinschreiben" betrifft. Das mit dem pulldownmenu hat mich nun aufgehalten hier weiter zu arbeiten.
Ich habe mal das Beispiel mit den Kreisen modifiziert und statt der Radiobuttons eine zweite Auswahlliste eingebaut:
<!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];f=d.elements["farbe"].options[d.elements["farbe"].selectedIndex].value;
k=d.elements["kreis"].options[d.elements["kreis"].selectedIndex].value;if(f!="Auswahl" && k!="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>
<select name="kreis" onchange="NeueFarbe2SVG()">
<option value="Auswahl">Kreis</option>
<option value="k1">Kreis 1</option>
<option value="k2">Kreis 2</option>
<option value="k3">Kreis 3</option>
</select>
</form>
</body>
</html>Ich hoffe, das Prinzip wird deutlich. Allerdings wird das entscheidende Problem bleiben: der fehlerfreie Zugriff auf das SVG-Objekt aus dem HTML-Kontext heraus.
MfG, Thomas
-
Hallo,
wollte gerade noch eine kleine Erfolgsmeldung einschieben.
Du hast aber auch schon wieder etwas neues.(Ich habe glaube ich blos die allererste win95 version)
Die etwas andere Verwendung der checkboxen funktioniert jetzt wenigstens. Auch wenn ich vielleicht Deine Vorlagen noch nicht ganz richtig angewendet habe. Merkwuerdig ist naemlich das bei
if (!checkbox.checked)
{ svgobj.setAttribute('style','visibility:visible;stroke:#cccccc'); }
die farbe steht wie sie eigentlich bei nicht-checkt ist.http://www.innonet.at/~jstebegg/g1-kurz.html
Die gewuenschte Verwendung der Pulldownmenues sieht man hier noch besser.
Wennigstens wenn ich eine Strasze auswaehle (anklicke) soll der etsprechende Text im Plan die Farbe wechseln.function selAuswahl (ohne kommentar)
Deine neueste Version muß ich mir natuerlich wieder auf der anderen Baustelle anschauen.
Ohne das jetzt noch genau zu kennen vermuthe ich das das Problem darin liegt das ich nur ein Auswahlmenue zur Verfuegung habe .
Das mit value="k1" (usw.) bzw den Namen der Objekte. In meinem Fall gibt es dafuer aber nur einen Farbwechsel fuer alle Kreise(id-Elemente)mfG
josef-
Hallo,
Merkwuerdig ist naemlich das bei
if (!checkbox.checked)
{ svgobj.setAttribute('style','visibility:visible;stroke:#cccccc'); }
die farbe steht wie sie eigentlich bei nicht-checkt ist.Steht ja auch ! (NOT) davor ...
MfG, Thomas
-
Hallo
Steht ja auch ! (NOT) davor ...
bin schon ein bischen ueberfordert .
bezueglich von gestern Abend.
Danke. fast schon super.
Fuer die letzten Aenderungen genuegte ja ein bischen Hausverstand.
Das funktioniert genauso wie gewuenscht.Warum eigentlich noch nicht bei
http://www.innonet.at/~jstebegg/g1-kurz.html
(vorerst nur die Straßennamen)
habe doch nur zwei-drei Namen ausgetauscht.
..elements.nebenstr.option= Null oder kein Objekt !?
Die einbindung ueber <object> oder <embed> macht keinen Unterschied.
...............
kreise.html
<script language="JavaScript" type="text/javascript">
<!--
function NeueFarbe2SVG()
{
var d,k,svgobj;
d=document.forms[0];
k=d.elements["nebenstr"].options[d.elements["nebenstr"].selectedIndex].value;if(k!="Auswahl")
{
svgobj=document.getElementById("svgkreise").getSVGDocument();
svgobj.getElementById(k).getStyle().setProperty("fill","#ff00ff");
}
}
//-->
</script>
</head>
<body>
<object id="svgkreise" data="kreise.svg" width="700" height="400" type="image/svg+xml">SVG-Objekt - Viewer</object>
<form action="">
<select name="nebenstr" onchange="NeueFarbe2SVG()">
<option value="Auswahl">Kreis</option>
<option value="k1">Kreis 1</option>
<option value="k2">Kreis 2</option>
<option value="k3">Kreis 3</option>
<option value="bezirk">bz</option>
<option value="volk">vo</option>
<option value="heg">herreng</option>
</select>
</form>
</body>
</html>
..... 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" width="700" height="400" >
<defs>
<style type="text/css">
<![CDATA[
.kunst { stroke:#c99;stroke-width:1;fill:#f0b5a0; }
.allg { stroke:#99c;stroke-width:1;fill:#b0c4de; }
.txt32 { font-family:'Arial'; font-size:32; baseline-shift:-8; }
]]>
</style>
</defs>
<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"/>
<g transform="translate(-20 20) scale(0.4)">
<path id="bezirk" style="fill: #F00" d="M880 628 821 604 824 598 803 587 814 565 825 560 848 522 905 549 917 547 925 521 943 531 929 578 893 561 879 583 889 589 885 594 902 605 898 613 889 611 886 614 z"/>
<path id="volk" class="kunst" d="M831 678 875 683 878 655 890 655 892 637 881 637 879 634 867 634 867 630 855 630 856 636 835 636 833 661 z"/>
<g id="straszen" style="fill:#099;">
<path id="herreng" class="strasze2" d="M766 797 825 868 894 949 950 1018 1034 1111"/>
<text id="heg" class="txt32"><textPath xlink:href="#herreng" startOffset="0">H e r r e n g a s s e</textPath></text>
</g>
</g>
</svg>mfG
josef-
Hallo,
Warum eigentlich noch nicht bei
http://www.innonet.at/~jstebegg/g1-kurz.html
(vorerst nur die Straßennamen)
habe doch nur zwei-drei Namen ausgetauscht.
..elements.nebenstr.option= Null oder kein Objekt !?Die Auswahlliste mit dem Namen "nebenstr" befindet sich im zweiten Formular. Deshalb ist zu schreiben:
d=document.forms[1];MfG, Thomas
-
Hallo,
Die Auswahlliste mit dem Namen "nebenstr" befindet sich im zweiten Formular. Deshalb ist zu schreiben:
d=document.forms[1];Nachtraeglich gesagt, haette ich das schon wissen muessen (koennen)
Danke noch einmal fuer die Hilfe.
Es wird auch Zeit das ich den Platz fuer andere Beitraege freihalte.
Ich habe den letzten Stand gleich bei g1-stmk eingebaut.mfG
josef
-
-
-
-
-
-
-
-
-
-
-
-
-