Web base - SVG
•
1 gostou•308 visualizações
Immagini raster e immagini vettoriali. Elementi base svg. Stili svg.
Recomendados
Mais conteúdo relacionado
Mais procurados
Destaque
Destaque (20)
Semelhante a Web base - SVG
Semelhante a Web base - SVG (20)
Mais de Annalisa Vignoli
Mais de Annalisa Vignoli (13)
Último
Último (20)
Web base - SVG
- 3. <!DOCTYPE html> <html> <head/> <meta charset="utf-8"> <title>Grafico Line</title> </head> <body> <svg width="150" height="150"> Primitive grafiche </svg> </body> </html>
- 5. <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” >
- 6. <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
- 7. <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
- 8. 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
- 10. <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> 0 0 1
- 11. <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 magnete 50,130
- 13. 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>
- 14. <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