Web base - SVG
-
Upload
annalisa-vignoli -
Category
Education
-
view
41 -
download
1
Transcript of Web base - SVG
![Page 1: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/1.jpg)
![Page 2: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/2.jpg)
ingrandimento
Primitive grafiche
ingrandimento
![Page 3: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/3.jpg)
<!DOCTYPE html><html> <head/> <meta charset="utf-8"> <title>Grafico Line</title> </head> <body> <svg width="150" height="150">
Primitive grafiche</svg>
</body></html>
![Page 4: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/4.jpg)
![Page 5: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/5.jpg)
<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” >
![Page 6: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/6.jpg)
<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
![Page 7: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/7.jpg)
<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
![Page 8: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/8.jpg)
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
![Page 9: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/9.jpg)
![Page 10: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/10.jpg)
<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
![Page 11: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/11.jpg)
<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
![Page 12: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/12.jpg)
![Page 13: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/13.jpg)
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>
![Page 14: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/14.jpg)
<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
![Page 15: Web base - SVG](https://reader031.fdocumenti.com/reader031/viewer/2022021422/587547eb1a28abb8208b6961/html5/thumbnails/15.jpg)