diff options
author | Florian Dieminger <me@fiji-flo.de> | 2021-02-11 18:27:33 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-11 18:27:33 +0100 |
commit | 609ee7efcfe881caa08237948e1ed3252e60afa1 (patch) | |
tree | e8c22089de06c8ef1a6d75a6e0d1e893403cd07a /files/pt-pt/web/svg | |
parent | ad7f998115dd568832332484debf1f1b16b0c905 (diff) | |
parent | 8519a85da1acd5b7863268b6cf6f9e4fd14bcf31 (diff) | |
download | translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.tar.gz translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.tar.bz2 translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.zip |
Merge pull request #43 from fiji-flo/unslugging-pt-pt
Unslugging pt pt
Diffstat (limited to 'files/pt-pt/web/svg')
-rw-r--r-- | files/pt-pt/web/svg/applying_svg_effects_to_html_content/index.html (renamed from files/pt-pt/web/svg/aplicar_efeitos_svg_conteudo_html/index.html) | 3 | ||||
-rw-r--r-- | files/pt-pt/web/svg/namespaces_crash_course/example/index.html (renamed from files/pt-pt/web/svg/namespaces_crash_course/exemplo/index.html) | 3 | ||||
-rw-r--r-- | files/pt-pt/web/svg/svg_animation_with_smil/index.html (renamed from files/pt-pt/web/svg/svg_animacao_com_smil/index.html) | 3 | ||||
-rw-r--r-- | files/pt-pt/web/svg/tutorial/introduction/index.html (renamed from files/pt-pt/web/svg/tutorial/introducao/index.html) | 3 | ||||
-rw-r--r-- | files/pt-pt/web/svg/tutorial/svg_and_css/index.html | 216 | ||||
-rw-r--r-- | files/pt-pt/web/svg/tutorial/svg_in_html_introduction/index.html (renamed from files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html) | 3 |
6 files changed, 226 insertions, 5 deletions
diff --git a/files/pt-pt/web/svg/aplicar_efeitos_svg_conteudo_html/index.html b/files/pt-pt/web/svg/applying_svg_effects_to_html_content/index.html index babd7630bb..6b97eae267 100644 --- a/files/pt-pt/web/svg/aplicar_efeitos_svg_conteudo_html/index.html +++ b/files/pt-pt/web/svg/applying_svg_effects_to_html_content/index.html @@ -1,7 +1,8 @@ --- title: Aplicar efeitos de SVG ao conteúdo HTML -slug: Web/SVG/Aplicar_efeitos_SVG_conteudo_HTML +slug: Web/SVG/Applying_SVG_effects_to_HTML_content translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +original_slug: Web/SVG/Aplicar_efeitos_SVG_conteudo_HTML --- <p>Os navegadores modernos suportam a utilização de <a href="/en-US/docs/SVG">SVG</a> dentro dos estilos de <a href="/en-US/docs/Web/CSS" title="Cascading Style Sheets">CSS</a> para aplicar efeitos gráficos ao conteúdo HTML.</p> diff --git a/files/pt-pt/web/svg/namespaces_crash_course/exemplo/index.html b/files/pt-pt/web/svg/namespaces_crash_course/example/index.html index a9fa3f8765..9a319f0673 100644 --- a/files/pt-pt/web/svg/namespaces_crash_course/exemplo/index.html +++ b/files/pt-pt/web/svg/namespaces_crash_course/example/index.html @@ -1,10 +1,11 @@ --- title: Exemplo -slug: Web/SVG/Namespaces_Crash_Course/Exemplo +slug: Web/SVG/Namespaces_Crash_Course/Example tags: - SVG - XML translation_of: Web/SVG/Namespaces_Crash_Course/Example +original_slug: Web/SVG/Namespaces_Crash_Course/Exemplo --- <p>In this example, we use <a href="/en-US/docs/XHTML">XHTML</a>, <a href="/pt-PT/docs/Web/SVG">SVG</a>, <a href="/pt-PT/docs/Web/JavaScript">JavaScript</a>, and the <a href="/pt-PT/docs/DOM/DOM_Reference">DOM</a> to animate a swarm of "motes". These motes are governed by two simple principles. First, each mote tries to move towards the mouse cursor, and second each mote tries to move away from the average mote position. Combined, we get this very natural-looking behavior.</p> diff --git a/files/pt-pt/web/svg/svg_animacao_com_smil/index.html b/files/pt-pt/web/svg/svg_animation_with_smil/index.html index be898b1037..b536e46b33 100644 --- a/files/pt-pt/web/svg/svg_animacao_com_smil/index.html +++ b/files/pt-pt/web/svg/svg_animation_with_smil/index.html @@ -1,6 +1,6 @@ --- title: Animação SVG com SMIL -slug: Web/SVG/SVG_animacao_com_SMIL +slug: Web/SVG/SVG_animation_with_SMIL tags: - Animação - Animação de SVG @@ -8,6 +8,7 @@ tags: - Gecko 2.0 - SVG translation_of: Web/SVG/SVG_animation_with_SMIL +original_slug: Web/SVG/SVG_animacao_com_SMIL --- <div class="warning"> <p>Embora o Chrome 45 tenha revogado SMIL em favor das animações CSS e da Web, os programadores do Chrome suspenderam essa revogação.</p> diff --git a/files/pt-pt/web/svg/tutorial/introducao/index.html b/files/pt-pt/web/svg/tutorial/introduction/index.html index 287de67a14..56e9179a48 100644 --- a/files/pt-pt/web/svg/tutorial/introducao/index.html +++ b/files/pt-pt/web/svg/tutorial/introduction/index.html @@ -1,6 +1,6 @@ --- title: Introdução -slug: Web/SVG/Tutorial/Introducao +slug: Web/SVG/Tutorial/Introduction tags: - Guía - Precisa de Atualização @@ -9,6 +9,7 @@ tags: - SVG - Tutorial - Tutorial translation_of: Web/SVG/Tutorial/Introduction +original_slug: Web/SVG/Tutorial/Introducao --- <p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> 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..fff48c7620 --- /dev/null +++ b/files/pt-pt/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,216 @@ +--- +title: Gráficos SVG +slug: Web/SVG/Tutorial/SVG_and_CSS +tags: + - CSS:Como_começar +translation_of: Web/SVG/Tutorial/SVG_and_CSS +original_slug: Web/CSS/Como_começar/Gráficos_SVG +--- +<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> diff --git a/files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html b/files/pt-pt/web/svg/tutorial/svg_in_html_introduction/index.html index 5ca7a4c9e7..d8cfd63791 100644 --- a/files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html +++ b/files/pt-pt/web/svg/tutorial/svg_in_html_introduction/index.html @@ -1,11 +1,12 @@ --- title: Introdução à SVG em HTML -slug: Web/SVG/Tutorial/SVG_na_Introducao_HTML +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction tags: - Intermediário - Precisa de Atualização - SVG translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +original_slug: Web/SVG/Tutorial/SVG_na_Introducao_HTML --- <h2 id="Overview" name="Overview">Resumo</h2> |