
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewbox="0 0 400 400" xxstyle="left:0px;top:0px;xxposition:relative;width:100%;height:100%" >
	<style>
	  line { stroke-width:3; opacity:0.8; }
	  #u1 { stroke:#00f; }
	  #u2 { stroke:#009; }
	  #ug { stroke:#007; }
	  #i1 { stroke:#f00; }
	  #i2 { stroke:#d00; }
	  #i3 { stroke:#b00; }
	  rect { stroke:black; fill:none; }

	  marker {
	  xfill: currentColor;
	  stroke: none;
	  overflow: visible;
	  }
	</style>

      <foreignObject width='400' height='100%' x='10' y='200'>
	<body xmlns="http://www.w3.org/1999/xhtml">
	  R1 <input id="inz1" type="range" min="1" value="14" max="200" oninput="ZD.change_z1(this.value)" />
	  <label id='txtz1'>14</label><br/>
	  C2 <input id="inz2" type="range" min="1" value="14" max="200" oninput="ZD.change_z2(this.value)" />
	  <label id='txtz2'>14</label><br/>
	  R3 <input id="inz3" type="range" min="1" value="20" max="200" oninput="ZD.change_z3(this.value)" />
	  <label id='txtz3'>14</label><br/>
	  <div>
	    <table>
	      <tr>
		<td>u1:</td>
		<td><label id='txtu1'>0</label></td>
	      </tr>
	      <tr>
		<td>u2:</td>
		<td><label id='txtu2'>0</label></td>
	      </tr>
	      <tr>
		<td>ug:</td>
		<td><label id='txtug'>0</label></td>
	      </tr>
	      <tr>
		<td>i1:</td>
		<td><label id='txti1'>0</label></td>
	      </tr>
	      <tr>
		<td>i2:</td>
		<td><label id='txti2'>0</label></td>
	      </tr>
	      <tr>
		<td>i3:</td>
		<td><label id='txti3'>0</label></td>
	      </tr>
	    </table>
	  </div>    

	  <div>
	    Bedingungen:
	    <ul>
	      <li>u1 parallel i1.</li>
	      <li>u2 = u3.</li>
	      <li>u2 parallel i3.</li>
	      <li>i2 eilt i3 90 Grad voraus.</li>
	      <li>u1 + u2 = ug = 20V</li>
	      <li> i1 = i2 + i3</li>
	    </ul>
	  </div>

	  
	</body>
      </foreignObject>
	
	<marker id='endu1' orient='auto' fill='#00f'>
	  <polygon points='-3,-2,0,0,-3,2' />
	  <text x='-10' y='-2' font-size='6'>u1</text>
	</marker>
	<marker id='endu2' orient='auto' fill='#009'>
	  <polygon points='-3,-2,0,0,-3,2' />
	  <text x='-10' y='-2' font-size='6'>u2</text>
	</marker>
	<marker id='endug' orient='auto' fill='#007'>
	  <polygon points='-3,-2,0,0,-3,2' />
	  <text x='-10' y='-2' font-size='6'>ug</text>
	</marker>
	<marker id='endi1' orient='auto' fill='#f00'>
	  <polygon points='-3,-2,0,0,-3,2' />
	  <text x='-10' y='-2' font-size='6'>i1</text>
	</marker>
	<marker id='endi2' orient='auto' fill='#d00'>
	  <polygon points='-3,-2,0,0,-3,2' />
	  <text x='-10' y='-2' font-size='6'>i2</text>
	</marker>
	<marker id='endi3' orient='auto' fill='#b00'>
	  <polygon points='-3,-2,0,0,-3,2' />
	  <text x='-10' y='-2' font-size='6'>i3</text>
	</marker>
	
	<line id='u1' x1='0' y1='0' x2='10' y2='100' marker-end='url(#endu1)' />
	<line id='u2' x1='0' y1='0' x2='20' y2='100' marker-end='url(#endu2)' />
	<line id='ug' x1='0' y1='0' x2='30' y2='100' marker-end='url(#endug)' />
	<line id='i1' x1='0' y1='0' x2='40' y2='100' marker-end='url(#endi1)' />
	<line id='i2' x1='0' y1='0' x2='50' y2='100' marker-end='url(#endi2)' />
	<line id='i3' x1='0' y1='0' x2='60' y2='100' marker-end='url(#endi3)' />

	  <rect x='450' y='400' width='50' height='20' />
	  <rect x='550' y='350' width='50' height='20' />
	  <line x1='570' y1='390' x2='570' y2='430' style="stroke:black; stroke-width:3;" />
	  <line x1='580' y1='390' x2='580' y2='430' style="stroke:black; stroke-width:3;" />
	  <text x='460' y='390'>R1</text>
	  <text x='560' y='340'>R3</text>
	  <text x='550' y='390'>C2</text>
	  <line x1='410' y1='410' x2='450' y2='410'  style="stroke:black; stroke-width:1;"/>
	  <line x1='500' y1='410' x2='570' y2='410'  style="stroke:black; stroke-width:1;"/>
	  <line x1='580' y1='410' x2='670' y2='410'  style="stroke:black; stroke-width:1;"/>
	  <line x1='520' y1='360' x2='550' y2='360'  style="stroke:black; stroke-width:1;"/>
	  <line x1='600' y1='360' x2='630' y2='360'  style="stroke:black; stroke-width:1;"/>
	  <line x1='520' y1='360' x2='520' y2='410'  style="stroke:black; stroke-width:1;"/>
	  <line x1='630' y1='360' x2='630' y2='410'  style="stroke:black; stroke-width:1;"/>
	
      <script>//<![CDATA[
"using strict"

var ZD = {

    ptu: [{x:20, y:30},
	 {x:20, y:30},
	 {x:40, y:30}
	],
    pti: [{x:20, y:30},
	 {x:20, y:30},
	 {x:40, y:30}
	],

    z1: 14,
    z2: 14,
    z3: 20,
    alpha: 0.5,
    u1: 0,
    i1: 0,
    u2: 0,
    i2: 0,
    u3: 0,
    i3: 0,
    ug: 0,
    
    change_z1: function( val ) {
	this.z1 = val;
	this.calc();
	this.draw();
    },

    change_z2: function( val ) {
	this.z2 = val;
	this.calc();
	this.draw();
    },

    change_z3: function( val ) {
	this.z3 = val;
	this.calc();
	this.draw();
    },

    calc: function() {
	var li1, li2, li3, scalei, lu1, lu2, lug, scaleu;
	// only relative values.
	li2 = 1/this.z2;
	li3 = 1/this.z3;
	li1 = Math.sqrt( li2*li2 + li3*li3 );
	this.alpha = Math.atan2(li2, li3);
	lu1 = li1 * this.z1;
	lu2 = li3 * this.z3;

	lug = Math.sqrt( lu1*lu1 + lu2*lu2 - 2*lu1*lu2*Math.cos( Math.PI - this.alpha ) ); // Cosinussatz
	// set the correct voltages with lug=20V.
	scaleu = 20/lug;
	lug *= scaleu;
	lu1 *= scaleu;
	lu2 *= scaleu;
	// set the correct currents.
	scalei = lu1 / this.z1 / li1;
	li1 *= scalei;
	li2 *= scalei;
	li3 *= scalei;
	// save the values.
	this.u1 = lu1;
	this.u2 = lu2;
	this.u3 = lu2;
	this.ug = lug;
	this.i1 = li1;
	this.i2 = li2;
	this.i3 = li3;
	// scale for gui.
	scalei = 400;
	li1 *= scalei;
	li2 *= scalei;
	li3 *= scalei;
	scaleu = 20;
	lug *= scaleu;
	lu1 *= scaleu;
	lu2 *= scaleu;
	// calculate points for drawing.
	this.ptu[1].x = this.ptu[0].x + lu1;
	this.ptu[2].x = Math.cos( this.alpha )*lu2 + this.ptu[1].x;
	this.ptu[2].y = Math.sin( this.alpha )*lu2 + this.ptu[1].y;
	//this.pti[0].x = this.ptu[1].x;  // another origin for the currents.
	this.pti[1].x = this.pti[0].x + li1;
	this.pti[2].x = Math.cos( this.alpha )*li3 + this.pti[0].x;
	this.pti[2].y = Math.sin( this.alpha )*li3 + this.pti[0].y;

    },
    
    draw: function() {
        var u1=document.getElementById('u1');
        var u2=document.getElementById('u2');
        var ug=document.getElementById('ug');
        var i1=document.getElementById('i1');
        var i2=document.getElementById('i2');
        var i3=document.getElementById('i3');
        var txtz1=document.getElementById('txtz1');
        var txtz2=document.getElementById('txtz2');
        var txtz3=document.getElementById('txtz3');
        var txtu1=document.getElementById('txtu1');
        var txtu2=document.getElementById('txtu2');
        var txtug=document.getElementById('txtug');
        var txti1=document.getElementById('txti1');
        var txti2=document.getElementById('txti2');
        var txti3=document.getElementById('txti3');

        u1.setAttributeNS(null, 'x1', this.ptu[0].x );	
	u1.setAttributeNS(null, 'y1', this.ptu[0].y );	
	u1.setAttributeNS(null, 'x2', this.ptu[1].x );	
	u1.setAttributeNS(null, 'y2', this.ptu[1].y );	

	u2.setAttributeNS(null, 'x1', this.ptu[1].x );	
	u2.setAttributeNS(null, 'y1', this.ptu[1].y );	
	u2.setAttributeNS(null, 'x2', this.ptu[2].x );	
	u2.setAttributeNS(null, 'y2', this.ptu[2].y );	
	
	ug.setAttributeNS(null, 'x1', this.ptu[0].x );	
	ug.setAttributeNS(null, 'y1', this.ptu[0].y );	
	ug.setAttributeNS(null, 'x2', this.ptu[2].x );	
	ug.setAttributeNS(null, 'y2', this.ptu[2].y );	

	i1.setAttributeNS(null, 'x1', this.pti[0].x );	
	i1.setAttributeNS(null, 'y1', this.pti[0].y );	
	i1.setAttributeNS(null, 'x2', this.pti[1].x );	
	i1.setAttributeNS(null, 'y2', this.pti[1].y );	
	
	i2.setAttributeNS(null, 'x1', this.pti[2].x );	
	i2.setAttributeNS(null, 'y1', this.pti[2].y );	
	i2.setAttributeNS(null, 'x2', this.pti[1].x );	
	i2.setAttributeNS(null, 'y2', this.pti[1].y );	

	i3.setAttributeNS(null, 'x1', this.pti[0].x );	
	i3.setAttributeNS(null, 'y1', this.pti[0].y );	
	i3.setAttributeNS(null, 'x2', this.pti[2].x );	
	i3.setAttributeNS(null, 'y2', this.pti[2].y );

	txtz1.textContent = this.z1;
	txtz2.textContent = this.z2;
	txtz3.textContent = this.z3;

	txtu1.textContent = this.u1;
	txtu2.textContent = this.u2;
	txtug.textContent = this.ug;
	txti1.textContent = this.i1;
	txti2.textContent = this.i2;
	txti3.textContent = this.i3;
    }
}

window.onload = function() {
    var inz1=document.getElementById('inz1');
    var inz2=document.getElementById('inz2');
    var inz3=document.getElementById('inz3');
    inz1.value = ZD.z1;
    inz2.value = ZD.z2;
    inz3.value = ZD.z3;
    ZD.calc();
    ZD.draw();
}      
    //]]></script>

  </svg>
