User:Lilyuserin/SVG/code

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search

Codebeispiele[edit]

Haberdasher's puzzle[edit]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="3680" height="3520">
<defs>
  	< !-- Dreiecksberechnungen
		     390 780 1560 2340
				 1351(=7*193) 2702
  	     Seitenlaenge: a (= 4 * 780 = 3120)
				 a/4 = 780
				 a/2 = 1560
				 a*3/4 = 2340
				 a*sqrt(3)= 5404
				 a*sqrt(3)/2 = 2702
				 a*sqrt(3)/3 = 1801.333
				 a*sqrt(3)/4 = 1351

				 Hoehe: h=sqrt(3)*a/2 (=2702)

				 Koordinaten der Eckpunkte:
				 A (0,0) B(3120,0) C(1560,2702)=(a/2,h)=(a/2,sqrt(3)*a/2)

				 Annaeherung von sqrt(3): 1351/780 = 1.732051282051282
				 sqrt(3) = 1,732050807568877
				 1351*1351/780/780 = 3,00000164365549

  	     Umkreisradius: ru = h*2/3 = sqrt(3)*a/3 (=1801.3333)
  	     Inkreisradius: ri = ru/2        (=900.6667)
				 Mittelpunkt: (A+B+C)/3 = (a/2,a*sqrt(3)/6)

  	     Koordinaten der Seitenmittelpunkte:
  	     D = (A+C)/2 = (a/4,sqrt(3)*a/4) = (780,1351)
				 E = (B+C)/2 = (a*3/4,sqrt(3)*a/4) = (2340,1351)

	       F = (A+B)/4 = (a/4,0) = (780,0)
				 G = (A+B)*3/4 = (a*3/4,0) = (2340,0)

				 E-F = (a/2,a*sqrt(3)/4) = (1560,1351)

				 (H-D)*(E-F)=0
				 HF parallel EF
				 hx = a*13/28
				 hy = a*3*sqrt(3)/28
				 H = (1448.571428571429,579)

 				 (I-G)*(E-F)=0
				 IF parallel EF
				 ix = a*15/28 = 1671,428571428571
				 iy = a*sqrt(3)/7 = 772
				 I = (1671.428571428571,772)
  	-->
<style type="text/css"><![CDATA[
    .Border { fill:none; stroke:blue; stroke-width:5 }
    .Connect { fill:none; stroke:#888888; stroke-width:2 }
    .SamplePath { fill:none; stroke:red; stroke-width:5 }
    .puzzleout { stroke:white; stroke-width:15 }
    .filly { fill:#facd2d }
    .fillr { fill:#f397ca }
    .fillw { fill:white }
    .fillb { fill:#69c2d4 }
    .fillg { fill:#cbea93 }
    .puzzley { fill:yellow; stroke:black; stroke-width:15 }
    .puzzler { fill:red; stroke:black; stroke-width:15 }
    .puzzleb { fill:blue; stroke:black; stroke-width:15 }
    .puzzlew { fill:white; stroke:black; stroke-width:15 }
    .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
    .CtlPoint { fill:#888888; stroke:none }
    .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
    .Label { font-size:22; font-family:Courier }
  ]]></style>
 <g id="triangle"
    transform="matrix(0.5,0,0,-0.5,300,1500)"
    style="fill-opacity:0;fill:none;stroke:blue;stroke-opacity:1;stroke-width:20">
  <polygon class="Border"
    points="0,0 3120,0 1560,2702 0,0"
    id="triangle" />
  </g>
  <path id="AFHD" class="fillg puzzleout"
     d="M0,0 h780 l668.57143,579 l-668.57143,772 z"
    />
  <path id="FGI" class="fillb puzzleout"
     d="M780 0 h1560 l-669.42857,772 z"
    />
  <path id="HECD" class="fillr puzzleout"
     d="M1448.57143,579 L2340,1351 L1560,2702 L780,1351 z"
    />
  <path id="GBEI" class="filly puzzleout"
     d="M2340,0 L3120,0 2340,1351 1671.42857,772 z"
    />
</defs>

 <g id="pieces"
    transform="matrix(0.5,0,0,-0.5,150,1360)">
    <path class="SamplePath" d="M0,0 h3120 L1560,2702 z" />
   <use xlink:href="#AFHD" />
   <use xlink:href="#FGI" />
   <use xlink:href="#HECD" />
   <use xlink:href="#GBEI" />
</g>
<g id="rotpieces"
  transform="matrix(0.5,0,0,-0.5,1330,1360)">
    <use xlink:href="#FGI" />
    <use xlink:href="#GBEI" />
    <g id="red+green" transform="rotate(180 2340 1351)">
    <use xlink:href="#AFHD" />
    <use xlink:href="#HECD" />
    </g>
</g>
<g
  transform="matrix(0.5,0,0,-0.5,-51,2460)">
    <use xlink:href="#FGI" />
    <path id="qAFHD" class="fillg puzzleout" transform="rotate(180 780 0)"
     d="M0 0 h780 l668.57143,579 l-668.57143,772 z"
    />
    <use xlink:href="#GBEI" />
    <use xlink:href="#HECD" transform="rotate(180 2340 1351)"
    />
</g>
<g
  transform="matrix(0.5,0,0,-0.5,1130,2460)">
    <g id="blue+green" transform="rotate(180 2340 0)">
    <use xlink:href="#FGI" />
    <use xlink:href="#AFHD" transform="rotate(180 780 0)"
    />
    </g>
    <use xlink:href="#GBEI" />
    <use xlink:href="#HECD" transform="rotate(180 2340 1351)"
    />
</g>
<g
  transform="matrix(0.5,0,0,-0.5,150,3500)">
    <use xlink:href="#FGI"/>
    <use xlink:href="#GBEI" />
    <g transform="rotate(180 2340 1351)">
    <use xlink:href="#AFHD" transform="rotate(180 780 1351)"
    />
    <use xlink:href="#HECD"
    />
    </g>
</g>
</svg>

Tangram[edit]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="1191" height="2344">
<defs>
  	< !-- Tangram
		     7 Elemente
		     Seitenlänge des Quadrates aller Figuren: 2a
		     Diagonale: a*sqrt(2) = b
		     2 gleichschenkelig rechtwinkelige Dreiecke Basis 2a
		     2 gleichschenkelig rechtwinkelige Dreiecke Basis a
		     1 Parallelogramm Basis a, Höhe a
				 1 Quadrat Seitenlänge b/4
				 1 gleichschenkelig rechtwinkeliges Dreieck Basis b/2
				 sqrt(2) = 1,414213562373095
         Näherung für sqrt(2): 577/408 = 1,41421568627451
         daher waehlen wir als a: 2*408 = 816
         a = 816
         2a = 1632
         b = 2308
         b/2 = 1154
         b/4 = 577
  	-->
<style type="text/css"><![CDATA[
    .puzzleout { stroke:white; stroke-width:15 }
    .fillg { fill:#facd2d }
    .fillr { fill:#f397ca }
    .fillb { fill:#69c2d4 }
    .fille { fill:#cbea93 }
    .fillv { fill:#a998c4 }
    .filly { fill:#fbf424 }
    .fillp { fill:#f13e62 }
  ]]></style>

  <rect id="square"
        width = "577" height = "577" class="fillv puzzleout"
  />
  <path id="bigtri1" class="fillr puzzleout"
     d="M0,0 h1632 l-816,816 z"
    />
  <path id="bigtri2" class="fillg puzzleout"
     d="M0,0 h1632 l-816,816 z"
    />
  <path id="smalltri1" class="fillb puzzleout"
     d="M0,0 h816 l-408,408 z"
    />
  <path id="smalltri2" class="fille puzzleout"
     d="M0,0 h816 l-408,408 z"
    />
  <path id="midtri" class="filly puzzleout"
     d="M0,0 h1154 l-577,577 z"
    />
  <path id="para" class="fillp puzzleout"
     d="M0,0 h816 l408,-408 h-816 z"
    />
</defs>

 <g id="tangram-rectangle"
    transform="matrix(1,0,0,-1,20,596)">
   <use xlink:href="#square" />
   <use xlink:href="#smalltri1" transform="translate(577,577) rotate(-45)" />
   <use xlink:href="#smalltri2" transform="translate(0,-577) rotate(45)" />
   <use xlink:href="#para" transform="translate(577,577) rotate(-45)" />
   <use xlink:href="#midtri" transform="translate(0,-577) " />
   <use xlink:href="#bigtri1" transform="translate(0,-577)  rotate(-45)"/>
   <use xlink:href="#bigtri2" transform="translate(1154,-1731)  rotate(135)"/>
</g>

</svg>

Tangram quadratisch[edit]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="2321" height="2321">
<defs>
  	< !-- Tangram
		     7 Elemente
		     Seitenlänge des Quadrates aller Figuren: 2a
		     Diagonale: a*sqrt(2) = b
		     2 gleichschenkelig rechtwinkelige Dreiecke Basis 2a
		     2 gleichschenkelig rechtwinkelige Dreiecke Basis a
		     1 Parallelogramm Basis a, Höhe a
				 1 Quadrat Seitenlänge b/4
				 1 gleichschenkelig rechtwinkeliges Dreieck Basis b/2
				 sqrt(2) = 1,414213562373095
         Näherung für sqrt(2): 577/408 = 1,41421568627451
         daher waehlen wir als a: 2*408 = 816
         a = 816
         2a = 1632
         b = 2308
         b/2 = 1154
         b/4 = 577
  	-->
<style type="text/css"><![CDATA[
    .Border { fill:none; stroke:blue; stroke-width:5 }
    .Connect { fill:none; stroke:#888888; stroke-width:2 }
    .SamplePath { fill:none; stroke:red; stroke-width:5 }
    .puzzleout { stroke:black; stroke-width:5 }
    .csqr { fill:red }
    .cbig1 { fill:yellow }
    .cbig2 { fill:green }
    .cmid { fill:orange }
    .csm1 { fill:cyan }
    .csm2 { fill:blue }
    .cpar { fill:purple }
    .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
    .CtlPoint { fill:#888888; stroke:none }
    .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
    .Label { font-size:22; font-family:Courier }
  ]]></style>

  <path id="square"
       class="csqr puzzleout"
			 d="M0,0 h577 v577 h-577 z"
  />
	 <path id="bigtri" 
     d="M0,-816 l816 816 -816,816 z"
    />
  <use id="bigtri1" class="cbig1 puzzleout"
     xlink:href="#bigtri"
    />
  <use id="bigtri2" class="cbig2 puzzleout"
     xlink:href="#bigtri"
    />
  <path id="smalltri"  
     d="M0,-408 l408 408 -408,408 z"
    />
  <use id="smalltri1" class="csm1 puzzleout"
     xlink:href="#smalltri"
    />
  <use id="smalltri2" class="csm2 puzzleout"
     xlink:href="#smalltri"
    />
  <path id="midtri" class="cmid puzzleout"
     d="M0,0 h1154 l-577,577 z"
    />
	<path id="para" class="cpar puzzleout"
     d="M0,0 h816 l408,-408 h-816 z"
    />
</defs>

 <g id="tangram-square"
    transform="translate(339,1154)">
		<use xlink:href="#bigtri1" transform="rotate(45 816 0) "/>
		<use xlink:href="#bigtri2" transform="rotate(-45 816 0) "/>
    <use xlink:href="#smalltri1" transform="translate(408,-577) rotate(135 408 0) "/>
	
		<use xlink:href="#square" transform="translate(816,-577) "/>
 	  <use xlink:href="#midtri" transform="translate(1393,577) rotate(-90) "/>
		<use xlink:href="#smalltri2" transform="translate(408,0) rotate(225 408 0) "/>
		<use xlink:href="#para" transform="translate(577,577) rotate(-45 816 0) "/>

</g>
</svg>

Gradient in Spektralfarben[edit]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="10">
<defs><linearGradient id="rainbow" x2="1" >
<stop offset="0" stop-color="red"/>
<stop offset="0.2857" stop-color="#ff0"/>
<stop offset="0.4286" stop-color="#0f0"/>
<stop offset="0.5714" stop-color="cyan"/>
<stop offset="0.7142" stop-color="blue"/>
<stop offset="0.8571" stop-color="#f0f"/>
<stop offset="1" stop-color="red"/>
</linearGradient></defs>
<rect width="100" height="10" fill="url(#rainbow)"/></svg>
Retrieved from "https://commons.wikimedia.org/w/index.php?title=User:Lilyuserin/SVG/code&oldid=282047513"