web base - svg
TRANSCRIPT
ingrandimento
Primitive grafiche
ingrandimento
<!DOCTYPE html><html> <head/> <meta charset="utf-8"> <title>Grafico Line</title> </head> <body> <svg width="150" height="150">
Primitive grafiche</svg>
</body></html>
<svg width="200" height="200" viewBox=”0 0 100 100” >
<svg width="200" height="100" viewBox=”0 0 100 100” >
<svg width="200" height="200" viewBox=”-50 0 100 100” >
<svg width="200" height="200" viewBox=”50 0 100 100” >
<svg width="400" height="110"> <rect x="10" y="30" width="300" height="100" style="fill : rgb(0,100,100); stroke-width:4; stroke:rgb(0,0,0)"/></svg>
<svg height="210" width="200" viewBox="0 0 200 200"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0); stroke-width:2" /></svg>
line rect
<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2" /></svg>
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" style="stroke:black; stroke-width:3; fill:red" /></svg>
circle ellipse
0,0 200
100
<svg width="400" height="200" viewBox=”0 0 200 100” ><polygon points="20,90 70,20 130,20 180,90" style="fill:rgb(256,160,60); stroke:rgb(60,160,240); stroke-width:10"</svg>
viewBox
<svg width="200" height="100" viewBox=”0 0 200 100” ><path d ="M0 10 L100 50 L100 100 L200 0" style="stroke:red; stroke-width:6; fill:none"</svg>
<svg width="200" height="100" viewBox=”0 0 200 100” ><path d="M50 50 A30 50 0 0 1 100 100" style="stroke:red; stroke-width:6; fill:none"</svg>
001
<svg width="200" height="200" viewBox=”0 0 200 200” ><path d="M50,50 Q50,130 100,100" style="stroke:red; stroke-width:6; fill:none"</svg>
control point . Questo punto attrae la curva come un magnete50,130
Le primitive SVG possono essere riunite in gruppi attraverso il tag <g>...</g>
Esempio:
<g style="stroke:green; stroke-width:5;"><line x1="0" y1="20" x2="70" y2="125"/><rect x="100" y="100" width="200" height="100" style="fill:#CCCC99;"/></g>
<svg width="150" height="150"><g style="fill:green; stroke:none">
<rect x="0" y="40" width="10" height="110" /><rect x="15" y="50" width="10" height="100" /><rect x="30" y="53" width="10" height="97" /><rect x="45" y="60 width="10" height="90" />………..
<rect x="120" y="10" width="10" height="140" /><rect x="135" y="20" width="10" height="130" />
</g></sgv>
Ciclo
