unslug pt-pt: move

1 files changed, 215 insertions, 0 deletions

diff --git a/files/pt-pt/web/svg/tutorial/svg_and_css/index.html b/files/pt-pt/web/svg/tutorial/svg_and_css/index.html
new file mode 100644
index 0000000000..074f78c92d
--- /dev/null
+++ b/files/pt-pt/web/svg/tutorial/svg_and_css/index.html
@@ -0,0 +1,215 @@
+---
+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>&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
+
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+
+&lt;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"&gt;
+
+&lt;title&gt;SVG demonstration&lt;/title&gt;
+&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
+
+&lt;defs&gt;
+  &lt;g id="segment" class="segment"&gt;
+    &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
+    &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
+    &lt;/g&gt;
+  &lt;g id="quadrant"&gt;
+    &lt;use xlink:href="#segment"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
+    &lt;/g&gt;
+  &lt;g id="petals"&gt;
+    &lt;use xlink:href="#quadrant"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
+    &lt;/g&gt;
+  &lt;radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse"&gt;
+    &lt;stop id="fade-stop-1" offset="33%"/&gt;
+    &lt;stop id="fade-stop-2" offset="95%"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+&lt;text id="heading" x="-280" y="-270"&gt;
+  SVG demonstration&lt;/text&gt;
+&lt;text  id="caption" x="-280" y="-250"&gt;
+  Move your mouse pointer over the flower.&lt;/text&gt;
+
+&lt;g id="flower"&gt;
+  &lt;circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/&gt;
+  &lt;use id="outer-petals" xlink:href="#petals"/&gt;
+  &lt;use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/&gt;
+  &lt;/g&gt;
+
+&lt;/svg&gt;
+</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 &gt; .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover &gt; .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 &gt; .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover &gt; .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>