.
Aurium.Colivre.Coop.br Esse site é Legal Demais para Internet Explorer

Aurium :: SVG por Partes

Últimas blogadas:

HeadlinesPlugin ERROR: 403 Forbidden
Cirandas.net



Para ver este exemplo você deve usar um navegador com suporte a SVG. Eu recomendo o FireFox 1.5 ou superior.

Este tópico mostra o código de um desenho SVG e ao passar o mouse sobre o código de elementos visíveis no desenho eles aparecerão com mais nitides para que possa ser reconhecido.

Este tópco é apenas uma modulazização para reduzir o tamanho do tópico PalestraSVG, onde este é incluido como um slide.

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" width="600" height="500"> <defs> <marker id="triangulo" viewBox="0 0 10 10" refX="0" refY="5" fill="#800" orient="auto" markerUnits="strokeWidth" markerWidth="4" markerHeight="3"> <path d="M 0 1 L 7 5 L 0 9 z" /> </marker> <radialGradient id="rg1" cx="45%" cy="45%" r="50%" fx="35%" fy="35%"> <stop stop-color="#FE7" offset="0%" /> <stop stop-color="#FD0" offset="50%" /> <stop stop-color="#DA0" offset="100%" /> </radialGradient> </defs> <rect id="caixaAzul" x="10" y="10" width="480" height="480" rx="50" ry="50" style="fill:#4DF; stroke:#08A; stroke-width:20px;" /> <path id="rabo" d="M 300 300 C 350 460 560 500 550 350" fill="none" stroke="#800" stroke-width="28" stroke-linecap="round" marker-end="url(#triangulo)" /> <circle id="cabeca" cx="250" cy="250" r="200" style="stroke:#000; stroke-width:20px; fill:url(#rg1);" /> <g id="olhos" transform="translate( 0, 5 )"> <ellipse id="olhoDir" cx="300" cy="200" rx="30" ry="50" style="fill:#000; stroke:none;" /> <path id="olhoEsq" style="fill:#000; stroke:none;" d="M 150 230 L 220 240 C 240 245 240 227 230 220 L 190 190 L 215 220 z" /> </g> <path id="boca" d="M 320 380 A 150 150 0 0 1 100 250" style="fill:none; stroke:#000; stroke-width:20px; stroke-linecap:round;" /> <g id="aureola"> <ellipse id="brilho1" cx="250" cy="75" rx="160" ry="50" style="fill:none; stroke:#FFC; stroke-width:28px; opacity:0.5" /> <ellipse id="brilho2" cx="250" cy="75" rx="160" ry="50" style="fill:none; stroke:#FFF050; stroke-width:20px; opacity:0.6" /> </g> </svg>

DiggThis

Copyright © 2004 - 2018 Aurélio A. Heckert
Conteúdo licenciado sob Creative Commons by-nc-sa