Inline-SVG → auf Style(CSS) per JS zugreifen? von Raketenwilli, 04.09.2023 18:49

Inline-SVG → auf Style(CSS) per JS zugreifen?

Raketenwilli 04.09.2023 18:49 (Versionen)

Hm. Ich mach ja eigentlich keine UI mehr, habe aber noch eines meiner uralten Projekte auf dem Zettel: Mit 3 Grafiken ging das mal... xeyes für Webseiten, ein nettes Gimmik.

Ich will auf die die CSS-Eigenschaften der Pupillen (Pupil_1, Pupil_2) und der darauf befindliche Reflexe PupilReflex_1, PupilReflex_2 lesend und schreibend zugreifen.

Wie zum Teufel geht das mit Javascript?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
	<title>Eyes</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.38" />
	<style>
		#Eyes{
			display: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
	<title>-Eyes</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.38" />
	<style>
		#Eyes{
			display: block;
			width:70px;
			height:35px;
			position: absolute;
			top:0px;
			left: calc(50vw - 50px);
		}  	
	</style>

	
</head>

<body>
	<p>Hih!</p>
	<svg id="Eyes" viewBox="0 0 200 100">
	  <style>
		#Eye_1 {
			cx: 40px;
			cy: 50px;
			rx: 35px;
			ry: 40px;
			fill: none;
			stroke: yellow;
			stroke-width: 15px;
		  }
		  #Eye_2 {
			cx: 135px;
			cy: 50px;
			rx: 35px;
			ry: 40px;
			fill: none;
			stroke: red;
			stroke-width: 15px;
		  }   
		  
		  #Pupil_1 {
			cx: 40px;
			cy: 50px;
			rx: 20px;
			ry: 20px;
			fill: black;
			stroke: none;
			stroke-width: 0;
		  }       

		  #PupilReflex_1 {
			cx: 45px;
			cy: 45px;
			rx: 5px;
			ry: 5px;
			fill: white;
			stroke: gray;
			stroke-width: 3px;
		  }  
		  
		  #Pupil_2 {
			cx: 135px;
			cy: 50px;
			rx: 20px;
			ry: 20px;
			fill: black;
			stroke: none;
			stroke-width: 0;
		  }		  
		  
		  #PupilReflex_2 {
			cx: 140px;
			cy: 45px;
			rx: 5px;
			ry: 5px;
			fill: white;
			stroke: gray;
			stroke-width: 3px;
		  }
	  </style>
	  <g id="Layer1">			
	  
		  <ellipse id="Eye_1" />
		  <ellipse id="Eye_2" />
		  <ellipse id="Pupil_1" />
		  <ellipse id="Pupil_2" /> 		  
		  <ellipse id="PupilReflex_1" />
		  <ellipse id="PupilReflex_2" />  
 
	  </g>
	</svg>
<body>

(sieht so aus:)

Wenn ich versuche, die Eigenschaften zu lesen ...

<script>
		const Pupil_1  = document.getElementById("Pupil_1");
		const elementStyle= Pupil_1.style;
		const out = document.getElementById("out");
		//out.textContent = '...';
		var i = 0;
		for ( const prop in elementStyle) {
		  out.textContent += i + ".:" + prop + ": ";
		  //if ( Object.hasOwn( elementStyle, prop ) ) {
			out.textContent += elementStyle[prop];
			out.textContent += " = ";
			//out.textContent += elementStyle.getPropertyValue( elementStyle[prop] );
			//out.textContent += elementStyle.getPropertyValue( prop );
			out.textContent += elementStyle.getPropertyValue( i++ );
			out.textContent += "\n";
		  //}
		}

</script>

... erhalte ich pro Objekt eine ordentliche Menge (im Mozilla sind es 1113) Namen von Eigenschaften, aber eben keine Werte. Alles NULL.

Muss ich es wie bei den früheren Grafiken machen und wirklich jedes Element, dessen Position ich manipulieren will, einzeln ins HTML einbauen oder kann ich via JS „ins SVG greifen”?

Und, um gleich den von Seiten Gunnars zu erwartenden Einwand abzufangen: