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

[Rolf B]

Hallo nochmal,

guck Dir mal dieses SVG an. Alle magischen Zahlen sind in custom properties untergebracht. Die Pupillen sind in ein g Element gekapselt, das per transform:translate verschoben werden kann. Die Verschiebung ist größenunabhängig, es wird einfach ein Wert zwischen -1 und 1 erwartet - die Skalierung erfolgt passend innerhalb des SVG mit CSS calc().

Du musst "nur" noch das Layer1 Element finden und in dessen style-Attribut die Custom Properties --dy, --d-left und --d-right passend setzen. Hypothese ist hier, dass die y-Auslenkung in beiden Augen immer gleich ist, und externen Anforderung ist, dass die Auslenkung in den Ecken nicht zu groß wird. Vermutlich sollte dx²+dy²<=1 gelten, ist es zu groß, musst Du herunterskalieren.

Ob eine Maus da ist, erkennst Du daran, ob Du mousemove-Events bekommst, denke ich…

	<svg id="Eyes" viewBox="0 0 300 140">
    <style>
      :root {
        --hcenter: 150px;
        --vcenter: 70px;
        --eye-width: 35px;
        --eye-height: 40px;
        --ring-stroke: 15px;
        --pupil-size: 20px;
      }
      .eye:nth-of-type(1) {
        --eye-center: calc(var(--hcenter) - var(--ring-stroke)*0.7 - var(--eye-width));
      }
      .eye:nth-of-type(2) {
        --eye-center: calc(var(--hcenter) + var(--ring-stroke)*0.7 + var(--eye-width));
      }
 		  .eye:nth-of-type(1) { --ring-color: yellow; }
		  .eye:nth-of-type(2) { --ring-color: red; }   
      

      .eye .ring {
        cx: var(--eye-center);
        cy: var(--vcenter);
        rx: var(--eye-width);
        ry: var(--eye-height);
  			fill: none;
			  stroke-width: var(--ring-stroke);
        stroke: var(--ring-color);
      }
      .eye:nth-of-type(1) .pupil {
        transform: translate(calc(var(--d-left)*10px), calc(var(--dy)*15px));
      }
      .eye:nth-of-type(2) .pupil {
        transform: translate(calc(var(--d-right)*10px), calc(var(--dy)*15px));
      }
      .eye .pupil ellipse:nth-child(1) {
        cx: var(--eye-center);
        cy: var(--vcenter);
  			rx: var(--pupil-size);
        ry: var(--pupil-size);
	    	fill: black; stroke: none; stroke-width: 0;
      }
      .eye .pupil ellipse:nth-child(2) {
        cx: calc(var(--pupil-size)/4 + var(--eye-center));
        cy: calc(var(--vcenter) - var(--pupil-size)/4);
  			rx: calc(var(--pupil-size)/4);
        ry: calc(var(--pupil-size)/4);
  			fill: white; stroke: gray; stroke-width: calc(var(--pupil-size)/6);
      }
	  </style>
	  <g id="Layer1"  style="--dy: -0.5; --d-left: 0.8; --d-right: -0.8;">
      <g class="eye">
	  	  <ellipse class="ring" />
        <g class="pupil">
		      <ellipse />
		      <ellipse />
        </g>
      </g>
      <g class="eye">
		    <ellipse class="ring" />
        <g class="pupil">
  		    <ellipse /> 		  
	  	    <ellipse />  
        </g>
      </g>
	  </g>
	</svg>

Rolf