<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="600" height="500">
<defs>
<marker> ... </marker>
<radialGradient> ... </radialGradient>
</defs>
<rect x="10" y="10" rx="50" ry="50"
width="480" height="480" />
<path d="M 300 300 C 350 460 560 500 550 350"
marker-end="url(#triangulo)" />
<circle cx="250" cy="250" r="200" />
<g>
<ellipse cx="300" cy="200" rx="30" ry="50" />
<path d="M 150 230 L 220 240 C 240 245 240 227 230 220 L 190 190 L 215 220 z" />
</g>
<path d="M 320 380 A 150 150 0 0 1 100 250" />
<g>
<ellipse cx="250" cy="75" rx="160" ry="50"
style="fill:none; stroke:#FFC; stroke-width:28px; opacity:0.5" />
<ellipse cx="250" cy="75" rx="160" ry="50"
style="fill:none; stroke:#FFF050; stroke-width:20px; opacity:0.6" />
</g>
</svg>
|
|
|
<?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>
|
|
Se esse navegador tem suporte nativo a svg você pode ver
um circulo laranja ao lado com a borda vermelho escuro.
Ele foi criado dinâmicamente com javascript e adicionado
dentro de um elemento <div>.
Clique nos botões ao lado para modificar seus atributos.
|
var svgCircle = document.createElementNS(svgNS,"circle");
svgCircle.setAttribute("r", "45");
htmlElement.appendChild(svgRoot);
Tetris |
Moon Lander |
|
|
|
|
class ChartSVG {
...
function ChartSVG( $w, $h ) { ... }
function setSteps( $steps ) { ... }
function addData( $dataObj ) { ... }
...
function generateSVG() { ... }
...
}
class ChartData {
...
var $type;
...
var $color;
...
}
|
$graf = new ChartSVG( 350, 300 );
$graf->setSteps( Array(
"Jan", "Fev", "Mar",
"Abr", "Mai", "Jun"
) );
$g1 = new ChartData( Array( ... ) );
$g1->setType( "Bar" );
$g2 = new ChartData( Array( ... ) );
$g2->setType( "Line" );
$graf->addData( $g1 );
$graf->addData( $g2 );
header("Content-type: image/svg+xml");
print $graf->generateSVG();
|
