User:Lilyuserin/SVG/code
< User:Lilyuserin | SVG
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>