JavaScript SVG Grafik - Style, Fill Attribut einen String aus Variable übergeben

drunken.panda · 17. Dezember 2014

Servus miteinander,

ich sitze seit einiger Zeit an einem trivialem Problem.

Ich habe ne SVG-Datei in der ich ein Objekt farblich ändern möchte.
Es funktioniert aber nur, wenn ich das Objekt.style.fill = "rgb(int,int,int)";
oder als Hex Wert angebe oder als Wort die Farbe z.B: red angebe.

Nun habe ich die Farbe allerdings in der Variable "egal" und dort ist nun ein String drin der folgendes Format besitzt, die int Werte sind natürlich mit Werten zw. 0-255 belegt (über alert getestet) "rgb(int,int,int)". Also genau in dem Format in dem ich das Fill-Element angeben müsste.

Es klappt aber nicht ich bekomme den Inhalt aus der "var egal" nicht an das objekt.style.fill Attribut übergeben...

Es wäre ja auch sehr umständlich das in egal gespeicherte "rgb(int,int,int)" in drei integer umzuwandeln. Das muss doch auch so gehen...

Fehler?

Code:

<script type="text/javascript">
    <=!=[=C=D=A=T=A=[
      function meldung(){
        alert("Javascript in SVG");
      }
      function farbeSetzen(Farbe, objekt)
      {
      
      objekt.style.fill = Farbe;
      
      }
      function NachOben(event) {
        alert("egaeas");
        var objekt;
        var oldstyle;
        
        
        
        objekt = event.target;
        
        oldstyle = objekt.style
    
        objekt.style.fill = "#FF9933";
        var oldColor;
        oldColor = oldstyle.fill;
        alert(oldColor.toString());
        alert("\"");
        
        var egal = "\""+oldColor.toString()+"\"";
      
       alert(egal); 

<!-- gibt einen String aus den ich mir eine Zeile vorher gebaut habe. sollte so an das       untenstehende Attribut übergeben werden... -->

       objekt.style.fill = egal;  <!-- klappt nicht -->


}
      

    ]=]=>
    </script>
    </defs>

Yuuri · 17. Dezember 2014

1. Mach die CDATA-Tags ordentlich oder gleich ganz weg.
2. Funktioniert es nicht, weil du egal bspw. auf "red" setzt, CSS Property fill: "red". Klar dass das nicht funktioniert, denn die Angabe heißt fill: red.

Code:

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Title of the document</title>
		
		<style type="text/css">
			body {
				background: gray;
			}
		</style>
	</head>
	<body>
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
		<rect x="90" y="96" transform="matrix(0.7553 -0.6554 0.6554 0.7553 -75.6219 174.4646)" fill="#ED1C24" stroke="#2E3192" stroke-width="8" stroke-miterlimit="10" width="211.641" height="185"/>
		<ellipse id="foo" fill="#009444" stroke="#FFF200" stroke-width="8" stroke-miterlimit="10" cx="247.685" cy="268.359" rx="88.685" ry="59.359"/>
		</svg>
		
		<script type="text/javascript">
			var foo = document.querySelector( "#foo" );
			
			foo.onclick = function( e )
			{
				var c1 = "yellow",
					c2 = "fuchsia";
				
				if( foo.style.fill == c1 )
				{
					foo.style.fill = c2;
					foo.style.stroke = c1;
				}
				else
				{
					foo.style.fill = c1;
					foo.style.stroke = c2;
				}
			};
		</script>
	</body>
</html>

drunken.panda schrieb:
Es wäre ja auch sehr umständlich das in egal gespeicherte "rgb(int,int,int)" in drei integer umzuwandeln.

Code:

[h,r,g,b] = "rgb(12,34,56)".match( /rgb\((\d+),(\d+),(\d+)\)/ );
console.log( [r,g,b] );

=> ["12", "34", "56"]

drunken.panda · 17. Dezember 2014

Jetzt funktioniert es. den CDATA Tag habe ich bei mir richtig. Keine Ahnung wieso hier so viele = da drin sind.

Wenn ich die Anführungszeichen in dem String in der Testvariable weglasse dann gehts. Also brauche ich die nur, wenn ich ihm den String nicht als Variable gebe, damit er weiß als was er den Text interpretieren muss!?

Ich dachte eigentlich, dass ich das getestet hatte mit und ohne Anführungszeichen aber vermutlich war die Uhrzeit zu weit vorangeschritten.... Ich danke dir erst einmal.

So schauts jetzt aus und er wechselt von braun (Ursprungsfarbe) zu gelb und wieder zu braun zurück am Ende.

Code:

 function NachOben(event) {
      
        alert("bin in NachOben drin");
        
        var objekt;
        var oldstyle;
        var oldColor;
        
        
        objekt = event.target;
        
        oldstyle = objekt.style
        oldColor = oldstyle.fill;
        
        objekt.style.fill = "yellow";
        
        
        alert(oldColor.toString());
        alert("\"");
        
        
        alert(testvar);
        
        testvar = "yellow";
    
        testvar = oldColor;
        
        objekt.style.fill = testvar;
}

Und dank dir für die Syntax bezüglich des Auseinandernehemens eines Strings in Integer. Möchte ich aber erst verwenden, wenn ich es muss ^^.

Suche

JavaScript SVG Grafik - Style, Fill Attribut einen String aus Variable übergeben

drunken.panda

Captain

Yuuri

Fleet Admiral

drunken.panda

Captain