diff options
Diffstat (limited to 'files/pt-pt/web/css/como_começar/gráficos_svg/index.html')
| -rw-r--r-- | files/pt-pt/web/css/como_começar/gráficos_svg/index.html | 215 |
1 files changed, 0 insertions, 215 deletions
diff --git a/files/pt-pt/web/css/como_começar/gráficos_svg/index.html b/files/pt-pt/web/css/como_começar/gráficos_svg/index.html deleted file mode 100644 index 074f78c92d..0000000000 --- a/files/pt-pt/web/css/como_começar/gráficos_svg/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Gráficos SVG -slug: Web/CSS/Como_começar/Gráficos_SVG -tags: - - 'CSS:Como_começar' -translation_of: Web/SVG/Tutorial/SVG_and_CSS ---- -<p>{{ PreviousNext("CSS:Como começar:Interfaces de usuário XUL", "CSS:Como começar:Dados XML") }}</p> - -<p>Esta página ilustra a linguagem especializada para criação de gráficos: SVG.</p> - -<p>Você cria uma simples demonstração que roda em seu navegador Mozilla com SVG ativado.</p> - -<h2 id="Informa.C3.A7.C3.A3o:_SVG" name="Informa.C3.A7.C3.A3o:_SVG">Informação: SVG</h2> - -<p><em>SVG</em> (Scalable Vector Graphics) é uma linguagem baseada em XML para criação de gráficos.</p> - -<p>Ela pode ser usada para imagens estáticas, e também para animações e interfaces de usuário.</p> - -<p>Como outras linguagens baseadas em XML, SVG suporta folhas de estilo CSS então você pode separar o estilo de um gráfico do seu conteúdo.</p> - -<p>As folhas de estilo que você usa com linguagens de marcação em outros documentos também podem especificar o URL de um gráfico SVG onde uma imagem é requerida. Por exemplo, uma folha de estilo que você usa com documentos HTML pode especificar uma URL de um gráfico SVG no valor da propriedade <code>background</code>.</p> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption>Mais detalhes</caption> - <tbody> - <tr> - <td><span class="comment">Enquanto escrevo (metade de 2005), somente algumas novas construções dos navegadores Mozilla tem suporte a SVG contruída. Você pode adicionar suporte ao SVG à outras versões instalando um plugin tal como este fornecido pela {{ mediawiki.external('http://www.adobe.com/svg/viewer/install/main.html Adobe') }}.</span> - <p>Para mais informações sobre SVG no Mozilla, veja a página <a href="/pt/SVG" title="pt/SVG">SVG</a> neste wiki.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_SVG" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_SVG">Ação: Uma demonstração SVG</h2> - -<p>Crie um novo documento SVG de um arquivo de texto simples, <code>doc8.svg</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre><?xml version="1.0" standalone="no"?> - -<?xml-stylesheet type="text/css" href="style8.css"?> - -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" - "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> - -<svg width="600px" height="600px" viewBox="-300 -300 600 600" - xmlns="http://www.w3.org/2000/svg" version="1.1" - xmlns:xlink="http://www.w3.org/1999/xlink"> - -<title>SVG demonstration</title> -<desc>Mozilla CSS Getting Started - SVG demonstration</desc> - -<defs> - <g id="segment" class="segment"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g id="quadrant"> - <use xlink:href="#segment"/> - <use xlink:href="#segment" transform="rotate(18)"/> - <use xlink:href="#segment" transform="rotate(36)"/> - <use xlink:href="#segment" transform="rotate(54)"/> - <use xlink:href="#segment" transform="rotate(72)"/> - </g> - <g id="petals"> - <use xlink:href="#quadrant"/> - <use xlink:href="#quadrant" transform="rotate(90)"/> - <use xlink:href="#quadrant" transform="rotate(180)"/> - <use xlink:href="#quadrant" transform="rotate(270)"/> - </g> - <radialGradient id="fade" cx="0" cy="0" r="200" - gradientUnits="userSpaceOnUse"> - <stop id="fade-stop-1" offset="33%"/> - <stop id="fade-stop-2" offset="95%"/> - </radialGradient> - </defs> - -<text id="heading" x="-280" y="-270"> - SVG demonstration</text> -<text id="caption" x="-280" y="-250"> - Move your mouse pointer over the flower.</text> - -<g id="flower"> - <circle id="overlay" cx="0" cy="0" r="200" - stroke="none" fill="url(#fade)"/> - <use id="outer-petals" xlink:href="#petals"/> - <use id="inner-petals" xlink:href="#petals" - transform="rotate(9) scale(0.33)"/> - </g> - -</svg> -</pre> -</div> - -<p>Crie um novo arquivo CSS, <code>style8.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre>/*** Demonstração SVG ***/ - -/* página */ -svg { - background-color: beige; - } - -#heading { - font-size: 24px; - font-weight: bold; - } - -#caption { - font-size: 12px; - } - -/* flor */ -#flower:hover { - cursor: crosshair; - } - -/* gradiente */ -#fade-stop-1 { - stop-color: blue; - } - -#fade-stop-2 { - stop-color: white; - } - -/* outras pétalas */ -#outer-petals { - opacity: .75; - } - -#outer-petals .segment-fill { - fill: azure; - stroke: lightsteelblue; - stroke-width: 1; - } - -#outer-petals .segment-edge { - fill: none; - stroke: deepskyblue; - stroke-width: 3; - } - -#outer-petals .segment:hover > .segment-fill { - fill: plum; - stroke: none; - } - -#outer-petals .segment:hover > .segment-edge { - stroke: slateblue; - } - -/* pétalas internas */ -#inner-petals .segment-fill { - fill: yellow; - stroke: yellowgreen; - stroke-width: 1; - } - -#inner-petals .segment-edge { - fill: none; - stroke: yellowgreen; - stroke-width: 9; - } - -#inner-petals .segment:hover > .segment-fill { - fill: darkseagreen; - stroke: none; - } - -#inner-petals .segment:hover > .segment-edge { - stroke: green; - } -</pre> -</div> - -<p>Abra o documento no seu navegador com SVG ativado. Mova o ponteiro do seu mouse sobre o gráfico.</p> - -<p>Este wiki não suporta página com SVG, então não é possível demonstrá-lo aqui. Os gráficos deverão parecer com isto:</p> - -<table style="border: 2px outset #36b;"> - <tbody> - <tr> - <td><img alt="SVG demonstration" class="internal" src="/@api/deki/files/2553/=SVG-flower.png"></td> - </tr> - </tbody> -</table> - -<p>Notas sobre esta demonstração:</p> - -<ul> - <li>O documento SVG é ligado à folha de estilo normalmente.</li> - <li>O SVG tem suas propriedades e valores CSS. Alguns deles são similares às propriedades do CSS para o HTML.</li> -</ul> - -<p> </p> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption>Desafio</caption> - <tbody> - <tr> - <td>Mude a folha de estilo de modo que as pétalas interiores tornem-se todas rosa quando o ponteiro do mouse estiver sobre alguma delas, sem mudar a maneira como as outras pétalas trabalham.</td> - </tr> - </tbody> -</table> - -<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> - -<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Gr%C3%A1ficos_SVG" title="Talk:pt/CSS/Como_começar/Gráficos_SVG">Discussão</a>.</p> - -<p>Nesta demonstração, seu navegador com SVG ativado já sabe como mostrar elementos SVG. A folha de estilo somente modifica a exibição em certos caminhos. Isto também é verdade para documentos HTML e XUL. Mas você pode usar o CSS para propósitos gerais em documentos XML, onde não é predefinido um caminho para exibir os elementos. A próxima página demonstra isto: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Dados_XML" title="pt/CSS/Como_começar/Dados_XML">Dados XML</a></strong></p> - -<p>{{ PreviousNext("CSS:Como começar:Interfaces de usuário XUL", "CSS:Como começar:Dados XML") }}</p> |