[FRAGE] Einbindung von SVG Dateien für ein Online Malbuch

[tsom]

Hallo,

beim erstellen eines Online-Malbuches habe ich folgendes Problem:

Wenn ich auf meiner Seite die SVG Datei direkt oder per PHP einbinde kann die SVG Datei wie gewollt bemalt werden.

			<?php echo file_get_contents("Bild1.svg"); ?>

Was ich nicht darf aber nicht anders zu bewerkstelligen weiß ist die SVG Datei als <img> einzubinden. Dann kann ich sie aber nicht ausmalen.

Zielstellung ist eine Auswahl aus einem Thumbnail per Klick direkt zu laden wie z.B.:

			<p align="center">
			<img src="http://forum.jswelt.de/images/Bild1.png" onClick='document.getElementById("bild").src="Bild1.svg"' width="140" alt="Vorschau" >
			<img src="http://forum.jswelt.de/images/Bild2.png" onClick='document.getElementById("bild").src="Bild2.svg"' width="140" alt="Vorschau">
			<img src="imagesBild3.png" onClick='document.getElementById("bild").src="Bild3.svg"' width="140" alt="Vorschau">

			<img src="Bild1.svg" id="bild" width="450" alt="Vorschau">
			</p>

Es müsste hier irgendwie eine direkte Einfügung der SVG Dateien erfolgen. Aber genau hier klemmt es bei mir irgendwie an der Idee.

Kann mit bitte jemand auf die Sprünge helfen diese letzte kleine Hürde zu nehmen?

Vielen Dank im Voraus

Peter

 

[tsseh]

ich bin mir nicht sicher was genau du vor hast, aber vermutlich ist die lösung das das svg über ajax zu laden und dann das svg-element mit innerHTML zu ersetzen

 

[tsom]

Danke tsseh für die schnelle Antwort.

Ohje, das svg-element mit innerHTML setzen hört sich gut an.
Aber das svg über ajax laden ... ?

Wenn du da einen konkreten Vorschlag hättest? Denn so stehe ich erst mal hilflos vor der Sache.

Werde parallel mal suchen ob ich da was hin bekomme.

Peter

 

[tsseh]

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

 

[tsom]

Danke für die super schnelle Antwort!

- - - Aktualisiert - - -

Jetzt ist die Verwirrung komplett.

Zwar kann ich jetzt mit Ajax innerHtml das Bild anzeigen und ausmalen, aber meine Verwirrung und Unkenntnis über Ajax ist jetzt komplett.
Ich habe jetzt dieses Konstrukt, aber ich kann damit nicht um gehen bzw. sehe nicht den Vorteil bzw. neue Möglichkeiten für mich.

	var ajax = new XMLHttpRequest();
	ajax.open("GET", "Bild1.svg", true);
	ajax.send();
	ajax.onload = function(e) {
	  var div = document.createElement("div");
	  div.innerHTML = ajax.responseText;
	  document.body.insertBefore(div, document.body.childNodes[0]);
	}

Vielleicht noch mal zur Erklärung:
Mir fehlt die Möglichkeit über ein Klick auf ein Thumbnail ein SVG (auszuwählen) darzustellen bzw. zu laden und zwar nicht über ein
<?php echo file_get_contents("Bild1.svg"); ?> , da ja dann eine Auswahl nur über PHP mit POST oder GET realisiert werden kann.

Ich will auf gar keinen Fall die Möglichkeit mit ajax verneien aber ich sehe sie einfach nicht.

Könnte mir da jemand vielleicht noch mal unter die Arme greifen?

 

[tsseh]

ich sehe dein problem nicht!
du musst den code in den click-handler einbauen

 

[tsom]

Ich leider schon

Mein Problem bei dem o.g. Ajax Code Schnipsel ist leider schon im Grundsatz zum Scheitern verurteilt.

Die Probleme beginnen schon damit das ich mir nicht sicher bin ob das onload und das insertBefore
richtig sind.

Denn ich bekomme ja nicht mal das Bild in einen Div Container um es vernünftig darzustellen.

Jetzt bitte auch nicht verkehrt verstehen, auf gar keinen Fall möchte ich hier fertigen Code anderseits
werde ich auch nie ein Top Programmierer. Doch Ajax überfordert mich leider schon im Ansatz.

Bei folgendem Versuch scheitert es dann wieder an der Funktionalität des ausmalen vom dem SVG.

  function bild(){
   var ajax = new XMLHttpRequest();
   ajax.onreadystatechange=function(){
   document.getElementById("output").innerHTML=ajax.responseText;
  };
   ajax.open("GET","Bild1.svg",true);
   ajax.send();
 }

 <img src="Bild1.png" onClick="bild()" width="140" alt="Vorschau" >

 

[tsseh]

Die Probleme beginnen schon damit das ich mir nicht sicher bin ob das onload und das insertBefore
richtig sind.

laut deiner aussage

Zwar kann ich jetzt mit Ajax innerHtml das Bild anzeigen und ausmalen

funktioniert es ja

Denn ich bekomme ja nicht mal das Bild in einen Div Container um es vernünftig darzustellen.

ich dachte es geht? was denn nun?

Bei folgendem Versuch scheitert es dann wieder an der Funktionalität des ausmalen vom dem SVG.

was verstehst du unter ausmalen?

 

[tsom]

Ich habe mir SVG Dateien erstellt in denen ich mit colorable Bereiche per Click ausmalen kann.
Das ist ja aber auch nicht Thema meines Problems sondern die Einbettung der SVG.

Die SVG Datein müssen direkt im HTML <svg><path bla bla /></svg> stehen was ich bisher über PHP gelöst habe s.o.
Einbindung als <img> <iframe> <object> geht nicht.

innerHtml geht über Ajax (mein 3. Post) auch das colorable allerdings bekomme ich sie nicht in einen Div Container sondern als oberstes Bild
in voller Größe auf der Seite.

Bei meinem 4. Post zeige ich nur mein Versagen es in eine Funktion zu drücken.

Ziel:
Über Thumbnail Auswahl ein SVG innerHtml anzuzeigen.


Ich hoffe es ist jetzt ein wenig klarer geworden was ich versuche.

 

[tsseh]

Ich habe mir SVG Dateien erstellt in denen ich mit colorable Bereiche per Click ausmalen kann.

das heißt? was ist colorable?

Das ist ja aber auch nicht Thema meines Problems sondern die Einbettung der SVG.

doch, wenn keiner weiß was du machen willst, kann dir keiner helfen. wenn es nur um die einbettung geht sage ich dir sonst, bette es einfach als img ein.

innerHtml geht über Ajax (mein 3. Post) auch das colorable allerdings bekomme ich sie nicht in einen Div Container sondern als oberstes Bild

in einem div container ist das svg schon, du packst es ja in einen rein.

var div = document.createElement("div");
div.innerHTML = ajax.responseText;

Bei meinem 4. Post zeige ich nur mein Versagen es in eine Funktion zu drücken.

das aus dem 4. post sollte so gehen. was ist denn das element mit id output?

document.getElementById("output").innerHTML=ajax.responseText;

du solltest noch readyState und status abprüfen.

 

[tsom]

das heißt? was ist colorable?

Verstehe deine Frage nicht. Einfärbbar vielleicht?

doch, wenn keiner weiß was du machen willst, kann dir keiner helfen. wenn es nur um die einbettung geht sage ich dir sonst, bette es einfach als img ein.

"Einbindung von SVG Dateien für ein Online Malbuch" so heißt das Thema

Einbindung als <img> <iframe> <object> geht nicht.

steht direkt darunter

das aus dem 4. post sollte so gehen. was ist denn das element mit id output?

document.getElementById("output").innerHTML=ajax.responseText;

Keine Ahnung suche immer noch einen Zugang zu Ajax.
Aber ich habe ja auch dazu geschrieben:

Bei folgendem Versuch scheitert es dann wieder an der Funktionalität des ausmalen vom dem SVG.

Und ich weiß nicht warum.

du solltest noch readyState und status abprüfen.

Das werde ich machen! Danke.


Genug Zitiert!


Hast du denn grundsätzlich mein Problem überhaupt verstanden?
Hast du vielleicht ein Code Schnipsel für mich bei dem das innerHtml funktioniert?

Langsam habe ich das Gefühl ich nerve nur.

 

[tsseh]

Hast du denn grundsätzlich mein Problem überhaupt verstanden?

nein, weil ich nicht weiß was du machen willst.
* du hast ein beispiel wo es so geht wie von dir gewünscht(dein post 3)
* du hast ein beispiel wo das "ausmalen" nicht geht (dein post 4)
beide beispiele sind eigentlich gleich. da ich nicht weiß was ausmalen bedeutet, kann ich nicht sagen was im post 4 anders gemacht werden muss.
sagen kann ich nur, einfach malen im svg ohne zusätzlichen was dafür zu machen geht nicht.
sprich da muss noch mehr vorhanden sein, was anhand von mausbewegungen striche/punkte/... ins svg einfügt

Hast du vielleicht ein Code Schnipsel für mich bei dem das innerHtml funktioniert?

den hast du doch selbst in deinem 3. post gebracht. dein 4. post ist im prinzip das gleiche wie post 3.

 

[tsom]

So ... erleichterung .. jetzt kommen wir glaube ich langsam auf den gleichen Nenner.

Es geht um ein Malbuch wie für Kinder auf Spielen.com und Co.
Auf eine Farbe klicken und dann fröhlich auf's Bild klicken und Bunt wird die Welt

Das habe ich erledigt und es funktioniert . Aber bis jetzt nur mit einem Bild das ist doof.

Jetzt kannst du mir als Fachmann vielleicht helfen was bei funktionierender Variante1,
wo ich leider nicht weiß wie ich auf div zugreifen kann um z.B. width zu ändern

	var ajax = new XMLHttpRequest();
	ajax.open("GET", "Bild1.svg", true);
	ajax.send();
	ajax.onload = function(e) {
	  var div = document.createElement("div");
	  div.innerHTML = ajax.responseText;
	  document.body.insertBefore(div, document.body.childNodes[0]);
	}

und nicht funktionierender Variante2 mit der ich super weiterarbeiten könnte

function bild(){
	var myAjax = new XMLHttpRequest();
	myAjax.onreadystatechange=function(){
		if (myAjax.readyState==4 && myAjax.status==200){
			document.getElementById("output").innerHTML=myAjax.responseText;
		}
	};
	myAjax.open("GET","Bild1.svg",true);
	myAjax.send();
}

Hoffentlich die Prüfung von readyStat und status richtig.

<img src="Bild.png" onClick="bild()" width="140" alt="Vorschau" >

 <div style="width:400px; border: 1px black solid;" id="output"></div>

anders ist, denn ich blicke da als Laie leider nicht durch.

 

[tsseh]

wo ich leider nicht weiß wie ich auf div zugreifen kann um z.B. width zu ändern

auf das div greifst du ja schon zu, über die variable div

var div = document.createElement("div");

allerdings solltest du das nicht über js, sondern über css machen
sprich du gibst dem div eine class und stylst das über dein css

div.className = "svg-cont";

Hoffentlich die Prüfung von readyStat und status richtig.

ja, wenn du lokal testest über file-protokoll musst du die status-prüfung rausnehmen und nur readyState prüfen
auf dem server passt das so

anders ist

wie gesagt, eigentlich nichts

 

[tsom]

Supi, danke Dir!

Schade, das du keinen Fehler in dem 2. Script findest versuche noch das <ul>"eigentlich"</ul> zu finden weil es so für mich schon optimal wäre.

Schöne Grüße

Peter

 

[tsseh]

versuche noch das <ul>"eigentlich"</ul> zu finden weil es so für mich schon optimal wäre.

dazu müsste man wissen was du eigentlich machen willst

 

[tsom]

Och menno, das Script soll so tun als ob ich <svg><path bla bla /></svg> direkt im Quelltext habe (innerHTML).
Ich will aber hier die bidl1.svg include'n, in der die <svg><path bla bla /></svg> steht.

Oder veräppelst du mich jetzt? Wehe

 

[tsseh]

das machen beide, du musst aber noch etwas anderes haben, was das "malen" macht.
das was das "malen" macht kommt nur mit der einen variante klar, mit der anderen nicht.
entweder passt du das, was das "malen" macht so an, dass es auch mit variante 2 klar kommt, oder du passt variante 2 so an, dass das was das "malen" macht damit klar kommt.
da hier keiner weiss, was das was das "malen" macht ist, kann dir keiner sagen was du anpassen musst.

 

[tsom]

Jupp, da hast du wohl war.
Dann mal der fehlende code für das "malen":

habe auch gerade festgestellt was unter php super lief fällt mir bei chromium und sicherlich andere auf die füsse unter Firefox alles i.O.

<script src="jquery-1.6.2.min.js"></script>

function eventWindowLoaded() {
   add_coloring_book_events();
}

function add_coloring_book_events() {
    $('path[class="colorable"]').bind("click", function(event) {
	color_chosen = $("#color_chosen").html();
        $(this).attr("fill", color_chosen); 
    });

    $('.color_choice').bind("click", function(event) {
       color_chosen = $(this).attr("id");
       $("#color_chosen").html(color_chosen); 
    });

}

<p>Farbauswahl: <span id="color_chosen">Black</span></p>
	<input type="button" class="color_choice" id="#7c635e" style="background-color: #7c635e; width: 25px; height: 25px;"/>
	<input type="button" class="color_choice" id="#3f271e" style="background-color: #3f271e; width: 25px; height: 25px;"/>
	<input type="button" class="color_choice" id="#dccf63" style="background-color: #dccf63; width: 25px; height: 25px;"/>

Eine SVG Datei müsste ich erst basteln, habe nur große Bilder.

 

[tsseh]

wo rufst du eventWindowLoaded() auf? ich vermute im onload. wenn ja, dürfte keine variante funktionieren, da zum zeitpunkt wo du die svgs liest onload schon lange durch ist.
du müsstest

add_coloring_book_events();

mit ins onredystatechanged (ganz ans ende der funktion) schreiben