diff options
Diffstat (limited to 'files/pt-pt/web/svg')
| -rw-r--r-- | files/pt-pt/web/svg/aplicar_efeitos_svg_conteudo_html/index.html | 301 | ||||
| -rw-r--r-- | files/pt-pt/web/svg/element/index.html | 298 | ||||
| -rw-r--r-- | files/pt-pt/web/svg/index.html | 95 | ||||
| -rw-r--r-- | files/pt-pt/web/svg/namespaces_crash_course/exemplo/index.html | 394 | ||||
| -rw-r--r-- | files/pt-pt/web/svg/namespaces_crash_course/index.html | 266 | ||||
| -rw-r--r-- | files/pt-pt/web/svg/svg_animacao_com_smil/index.html | 125 | ||||
| -rw-r--r-- | files/pt-pt/web/svg/tutorial/index.html | 32 | ||||
| -rw-r--r-- | files/pt-pt/web/svg/tutorial/introducao/index.html | 52 | ||||
| -rw-r--r-- | files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html | 179 |
9 files changed, 1742 insertions, 0 deletions
diff --git a/files/pt-pt/web/svg/aplicar_efeitos_svg_conteudo_html/index.html b/files/pt-pt/web/svg/aplicar_efeitos_svg_conteudo_html/index.html new file mode 100644 index 0000000000..babd7630bb --- /dev/null +++ b/files/pt-pt/web/svg/aplicar_efeitos_svg_conteudo_html/index.html @@ -0,0 +1,301 @@ +--- +title: Aplicar efeitos de SVG ao conteúdo HTML +slug: Web/SVG/Aplicar_efeitos_SVG_conteudo_HTML +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +<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> + +<p>You may specify SVG in styles either within the same document or an external style sheet. There are 3 properties you can use: <a href="/en-US/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/en-US/docs/Web/CSS/clip-path"><code>clip-path</code></a>, and <a href="/en-US/docs/Web/CSS/filter"><code>filter</code></a>.</p> + +<div class="note"><strong>Nota:</strong> as referências a SVG nos ficheiros externos devem ter a <a href="/pt-PT/docs/Web/Seguranca/politica_de_mesma_origem">mesma origem</a> como o documento de referência.</div> + +<h2 id="Using_embedded_SVG">Using embedded SVG</h2> + +<p>To apply an SVG effect using CSS styles, you first need to create the CSS style that references the SVG to apply.</p> + +<pre class="brush: html"><style>p { mask: url(#my-mask); }</style> +</pre> + +<p>In the above example, all paragraphs are masked by an <a href="/en-US/docs/Web/SVG/Element/mask">SVG <code><mask></code></a> with the <a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> <code>my-mask</code>.</p> + +<h3 id="Example_Masking">Example: Masking</h3> + +<p>For example, you can make a gradient mask for HTML content using SVG and CSS code similar to the following, inside your HTML document:</p> + +<pre class="brush: html"><svg height="0"> + <mask id="mask-1"> + <linearGradient id="gradient-1" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> + </mask> +</svg> +</pre> + +<pre class="brush: css">.target { + mask: url(#mask-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</pre> + +<p>Note that in the CSS, the mask is specified using a URL to the ID <code>#mask-1</code>, which is the ID of the SVG mask specified below it. Everything else specifies details about the gradient mask itself.</p> + +<p>Applying the SVG effect to (X)HTML is accomplished by assigning the <code>target</code> class defined above to an element, like this:</p> + +<pre class="brush: html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +</pre> + +<p>The above example would be rendered with the mask applied to it.</p> + +<p>{{EmbedLiveSample('Example_Masking', 650, 200)}}</p> + +<h3 id="Example_Clipping">Example: Clipping</h3> + +<p>This example demonstrates using SVG to clip HTML content. Notice that even the clickable areas for links are clipped.</p> + +<pre class="brush: html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> + +<button onclick="toggleRadius()">Toggle radius</button> + +<svg height="0"> + <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> + <rect x="0.5" y="0.2" width="0.5" height="0.8"/> + </clipPath> +</svg> +</pre> + +<pre class="brush: css">.target { + clip-path: url(#clipping-path-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</pre> + +<p>This establishes a clipping area made of a circle and rectangle, assigns it the ID <code>#clipping-path-1</code>, then references it in the CSS. The clip path can be assigned to any element with the <code>target</code> class.</p> + +<p>You can make changes to the SVG in real time and see them immediately affect the rendering of the HTML. For example, you can resize the circle in the clip path established above:</p> + +<pre class="brush: js">function toggleRadius() { + var circle = document.getElementById("circle"); + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; +} +</pre> + +<p>{{EmbedLiveSample('Example_Clipping', 650, 200)}}</p> + +<h3 id="Example_Filtering">Example: Filtering</h3> + +<p>This demonstrates applying a filter to HTML content using SVG. It establishes several filters, which are applied with CSS to three elements in both the normal and mouse <a href="/en-US/docs/Web/CSS/:hover">hover</a> states.</p> + +<pre class="brush: html"><p class="target" style="background: lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<pre class="target">lorem</pre> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +</pre> + +<p>Any SVG filter can be applied this way. For example, to apply a blur effect, you might use:</p> + +<pre class="brush: html"><svg height="0"> + <filter id="f1"> + <feGaussianBlur stdDeviation="3"/> + </filter> +</svg></pre> + +<p>You could also apply a color matrix:</p> + +<pre class="brush: html"><svg height="0"> + <filter id="f2"> + <feColorMatrix values="0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0 0 0 1 0"/> + </filter> +</svg> +</pre> + +<p>And some more filters:</p> + +<pre class="brush: html"><span><svg height="0"> +</span> <filter id="f3"> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> + <filter id="f4"> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + </filter> + <filter id="f5"> + <feColorMatrix values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + </filter> +<span></svg></span></pre> + +<p>The five filters are applied using the following CSS:</p> + +<pre class="brush: css">p.target { filter:url(#f3); } +p.target:hover { filter:url(#f5); } +b.target { filter:url(#f1); } +b.target:hover { filter:url(#f4); } +pre.target { filter:url(#f2); } +pre.target:hover { filter:url(#f3); } +</pre> + +<p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p> + +<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p> + +<h3 id="Example_Blurred_Text">Example: Blurred Text</h3> + +<p>In order to blur text, Webkit based browsers have a (prefixed) CSS filter called blur (see also <a href="/en-US/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>). You can achieve the same effect using SVG filters.</p> + +<pre class="brush: html"><p class="blur">Time to clean my glasses</p> +<svg height="0"> + <defs> + <filter id="wherearemyglasses" x="0" y="0"> + <feGaussianBlur in="SourceGraphic" stdDeviation="1"/> + </filter> + </defs> +</svg> +</pre> + +<p>You can apply the SVG and the CSS filter in the same class:</p> + +<pre class="brush: css">.blur { filter: url(#wherearemyglasses); }</pre> + +<p>{{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }}</p> + +<p>Blurring is computation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.</p> + +<h2 id="Using_external_references">Using external references</h2> + +<p>SVG used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the HTML document to which it's applied.</p> + +<p>For example, if your CSS is in a file named <code>default.css</code>, it can look like this:</p> + +<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre> + +<p>The SVG is then imported from a file named <code>resources.svg</code>, using the clip path with the ID <code>c1</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li> + <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (blog post)</li> + <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (blog post) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a>)</li> +</ul> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody><tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> +</tbody></table> +</div> +</div> + +<div id="SL_shadow_translation_result"> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody><tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> +</tbody></table> +</div> +</div> +</div> diff --git a/files/pt-pt/web/svg/element/index.html b/files/pt-pt/web/svg/element/index.html new file mode 100644 index 0000000000..27ec9421de --- /dev/null +++ b/files/pt-pt/web/svg/element/index.html @@ -0,0 +1,298 @@ +--- +title: SVG - Referência de elemento +slug: Web/SVG/Element +tags: + - Desenho + - Elementos + - Gráficos Vetoriais + - Referência de SVG + - SVG + - 'l10n:priority' +translation_of: Web/SVG/Element +--- +<p>« <a href="/pt-PT/docs/Web/SVG">SVG</a> / <a href="/pt-PT/docs/Web/SVG/Atributo">SVG - Referência de atributo</a> »</p> + +<p><span class="seoSummary">SVG drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams. Here you'll find reference documentation for each of the SVG elements.</span></p> + +<h2 id="SVG_-_Elementos_de_A_até_Z">SVG - Elementos de A até Z</h2> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feDropShadow")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{SVGElement("g")}}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{SVGElement("image")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("mesh")}}</li> + <li>{{SVGElement("meshgradient")}}</li> + <li>{{SVGElement("meshpatch")}}</li> + <li>{{SVGElement("meshrow")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("solidcolor")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{SVGElement("view")}}</li> +</ul> +</div> + +<h2 id="SVG_-_Elementos_por_categoria">SVG - Elementos por categoria</h2> + +<h3 id="Elementos_de_animação">Elementos de animação</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> + +<h3 id="Formas_básicas">Formas básicas</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Elementos_contentores">Elementos contentores</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="Elementos_descritivos">Elementos descritivos </h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Elementos_filtros_primitivos">Elementos filtros primitivos</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="Elementos_de_tipo_de_letra">Elementos de tipo de letra</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> + +<h3 id="Elementos_gradientes">Elementos gradientes</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="Elementos_gráficos">Elementos gráficos</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> + +<h3 id="Elementos_referenciadores_de_gráficos">Elementos referenciadores de gráficos</h3> + +<p>{{HTMLElement("audio")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("mesh")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}</p> + +<h3 id="Elementos_HTML">Elementos HTML</h3> + +<p>{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("video")}}</p> + +<h3 id="Elementos_fonte_de_luz">Elementos fonte de luz</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="Elementos_nunca_apresentados">Elementos nunca apresentados</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p> + +<h3 id="Elementos_servidores_de_tinta">Elementos servidores de tinta</h3> + +<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p> + +<h3 id="Elementos_apresentáveis">Elementos apresentáveis</h3> + +<p>{{SVGElement("a")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}</p> + +<h3 id="Elementos_de_forma">Elementos de forma</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Elementos_estruturais">Elementos estruturais</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Elementos_de_conteúdo_textual">Elementos de conteúdo textual</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Elementos_filhos_de_conteúdo_textual">Elementos filhos de conteúdo textual</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Elementos_não_categorizados">Elementos não categorizados</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> + +<h2 id="Obsolete_and_deprecated_elements">Obsolete and deprecated elements</h2> + +<div class="blockIndicator warning"> +<p><strong>Aviso:</strong> These are old SVG elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> +</div> + +<h3 id="A_2">A</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p> + +<h3 id="C_2">C</h3> + +<p>{{SVGElement("cursor")}}</p> + +<h3 id="F_2">F</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p> + +<h3 id="G_2">G</h3> + +<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p> + +<h3 id="H_2">H</h3> + +<p>{{SVGElement("hkern")}}</p> + +<h3 id="M_2">M</h3> + +<p>{{SVGElement("missing-glyph")}}</p> + +<h3 id="T_2">T</h3> + +<p>{{SVGElement("tref")}}</p> + +<h3 id="V_2">V</h3> + +<p>{{SVGElement("vkern")}}</p> + +<h2 id="Consulte_também">Consulte também</h2> + +<ul> + <li><a href="/pt-PT/docs/Web/SVG/Attribute">SVG + Referência de atributo</a></li> + <li><a href="/pt-PT/docs/Web/SVG/Tutorial">SVG - Tutorial</a></li> + <li><a href="/pt-PT/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG - Referência de interface</a></li> +</ul> + +<p>{{SVGRef}}</p> diff --git a/files/pt-pt/web/svg/index.html b/files/pt-pt/web/svg/index.html new file mode 100644 index 0000000000..8d27ffbb6b --- /dev/null +++ b/files/pt-pt/web/svg/index.html @@ -0,0 +1,95 @@ +--- +title: SVG - Gráficos Vetoriais Escaláveis +slug: Web/SVG +tags: + - Gráficos 2D + - Imagens + - Prioridade l10n + - Referencia + - SVG + - Web + - graficos + - Ícones +translation_of: Web/SVG +--- +<div class="callout-box"><strong><a href="/pt-PT/docs/Web/SVG/Tutorial">Inicação</a></strong><br> +Este tutorial irá ajudá-lo a começar a utilizar SVG.</div> + +<p><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> é uma linguagem de marcação com base em <a href="/pt-PT/docs/Introducao_a_XML">XML </a>para descrever dois <a class="external" href="https://pt.wikipedia.org/wiki/Desenho_vetorial">gráficos vetoriais</a> dimensionais.</span> Como tal, é um padrão da Web aberta baseado erm texto para descrever imagens que podem ser renderizadas para qualquer tamanho e são criadas especificamente para funcionarem bem com outros padrões da Web, incluindo <a href="https://wiki.developer.mozilla.org/pt-PT/docs/Web/CSS">CSS</a>, <a href="https://wiki.developer.mozilla.org/pt-PT/docs/DOM">DOM</a>, <a href="https://wiki.developer.mozilla.org/pt-PT/docs/Web/JavaScript">JavaScript</a>, e <a href="https://wiki.developer.mozilla.org/pt-PT/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>. SVG é, essencialmente para os gráficos, o que o <a href="/pt-PT/docs/Web/HTML">HTML</a> é para o texto.</p> + +<p>SVG images and their related behaviors are defined in <a href="/pt-PT/docs/Web/XML">XML</a> text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.</p> + +<p>Compared to classic bitmapped image formats such as {{Glossary("JPEG")}} or {{Glossary("PNG")}}, SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly.</p> + +<p>SVG tem sido desenvolvido por <a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a>, desde 1999.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentação">Documentação</h2> + +<dl> + <dt><a href="/pt-PT/docs/Web/SVG/Element">SVG - referência de elemento</a></dt> + <dd>Details about each SVG element.</dd> + <dt><a href="/pt-PT/docs/Web/SVG/Attribute">SVG - referência de atributo</a></dt> + <dd>Details about each SVG attribute.</dd> + <dt><a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> + <dd>Details about the SVG DOM API, for interaction with JavaScript.</dd> + <dt><a href="/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></dt> + <dd>SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to <a href="/en-US/docs/SVG_In_HTML_Introduction">enhance a regular HTML page or web application</a>.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> + +<h2 class="Community" id="Comunidade">Comunidade</h2> + +<ul> + <li>Consulte os fóruns da Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="Ferramentas">Ferramentas</h2> + +<ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">Validador de SVG </a>(<strong>Descontinuado</strong>)</li> + <li><a href="/pt-PT/docs/tag/SVG:Tools">Mais Ferramentas...</a></li> + <li>Outros recursos: <a href="/pt-PT/docs/Introducao_a_XML">XML</a>, <a href="/pt-PT/docs/Web/CSS">CSS</a>, <a href="/pt-PT/docs/DOM/DOM_Reference">DOM</a>, <a href="/pt-PT/docs/Web/API/API_de_canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Exemplos">Exemplos</h2> + +<ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> + <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> + <li><a href="/en-US/docs/SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> +</ul> + +<h3 id="Animação_e_interações">Animação e interações</h3> + +<p>Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> + +<ul> + <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of {{Glossary("SMIL")}} animation support</li> + <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> +</ul> + +<h3 id="Mapeamento_gráficos_jogos_e_experiências_em_3D">Mapeamento, gráficos, jogos e experiências em 3D</h3> + +<p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> + +<ul> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> + <li><a href="http://jointjs.com/">JointJS</a> (JavaScript diagramming library)</li> + <li><a href="https://d3js.org/">D3</a> ( JavaScript library for visualizing data with HTML, SVG, and CSS )</li> +</ul> +</div> +</div> diff --git a/files/pt-pt/web/svg/namespaces_crash_course/exemplo/index.html b/files/pt-pt/web/svg/namespaces_crash_course/exemplo/index.html new file mode 100644 index 0000000000..a9fa3f8765 --- /dev/null +++ b/files/pt-pt/web/svg/namespaces_crash_course/exemplo/index.html @@ -0,0 +1,394 @@ +--- +title: Exemplo +slug: Web/SVG/Namespaces_Crash_Course/Exemplo +tags: + - SVG + - XML +translation_of: Web/SVG/Namespaces_Crash_Course/Example +--- +<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> + +<p>This is done completely in W3C Standards–XHTML, SVG, and JavaScript–no Flash or any vendor-specific extensions. This example should work in Firefox 1.5 and above.</p> + +<p><a class="internal button liveSample" href="http://developer.mozilla.org/samples/svg/swarm-of-motes.xhtml">Ver o exemplo</a></p> + +<pre class="brush:xml"><?xml version='1.0'?> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> + <head> + <title>A swarm of motes</title> + <style type='text/css'> + <![CDATA[ + label, input + { + width: 150px; + display: block; + float: left; + margin-bottom: 10px; + } + label + { + text-align: right; + width: 75px; + padding-right: 20px; + } + br + { + clear: left; + } + ]]> + </style> + </head> + <body onload='update()'> + <svg:svg id='display' width='400' height='300'> + <svg:circle id='cursor' cx='200' +cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> + </svg:svg> + + <p>A swarm of motes, governed by two simple principles. + First, each mote tries to move towards the cursor, and + second each mote tries to move away from the average + mote position. Combined, we get this very natural + looking behavior. + </p> + + <p> + This is done completely in W3C Standards–XHTML, + SVG and JavaScript–no flash or any vendor specific + extensions. Currently, this will work in Mozilla Firefox + version 1.5 and above. + </p> + + <div> + (C) 2006 <a id='emailme' href='#'>Nick Johnson</a> + + <script type='text/javascript'> + <![CDATA[ + // foil spam bots + var email = '@riovia.net'; + email ='nick' + email; + document.getElementById('emailme').href = 'mailto:'+email; + ]]> + </script> + This software is free for you to use in any way whatsoever, + and comes with no warranty at all. + </div> + + <form action="" onsubmit="return false;"> + <p> + <label>Number of motes:</label> + <input id='num_motes' value='5'/> + <br/> + + <label>Max. Velocity:</label> + <input id='max_velocity' value='15'/> + <br/> + + <label>Attraction to cursor:</label> + <input id='attract_cursor' value='6'/> + <br/> + + <label>Repulsion from peers:</label> + <input id='repel_peer' value='5'/> + <br/> + </p> + </form> + + <script type='text/javascript'> + <![CDATA[ + + // Array of motes + var motes; + + // Get the display element. + function Display() + { + return document.getElementById('display'); + } + + // Determine dimensions of the display element. + // Return this as a 2-tuple (x,y) in an array + function Dimensions() + { + // Our Rendering Element + var display = Display(); + var width = parseInt( display.getAttributeNS(null,'width') ); + var height = parseInt( display.getAttributeNS(null,'height') ); + + return [width,height]; + } + + // This is called by mouse move events + var mouse_x = 200, mouse_y = 150; + function OnMouseMove(evt) + { + mouse_x = evt.clientX; + mouse_y = evt.clientY; + + var widget = document.getElementById('cursor'); + widget.setAttributeNS(null,'cx',mouse_x); + widget.setAttributeNS(null,'cy',mouse_y); + } + document.onmousemove = OnMouseMove; + + // Determine (x,y) of the cursor + function Cursor() + { + return [mouse_x, mouse_y]; + } + + // Determine average (x,y) of the swarm + function AverageMotePosition() + { + if( !motes ) + return [0,0]; + + if( motes.length == 0 ) + return [0,0]; + + var i; + var sum_x=0, sum_y=0; + for(i=0; i<motes.length; i++) + { + sum_x += motes[i].x; + sum_y += motes[i].y; + } + + return [sum_x/motes.length, sum_y/motes.length]; + } + + // A nicer, integer random + function Rand(modulo) + { + return Math.round( Math.random() * (modulo-1)); + } + + // Class Mote + function Mote() + { + // Dimensions of drawing area. + var dims = Dimensions(); + var width = dims[0], height = dims[1]; + + // Choose a random coordinate to start at. + this.x = Rand( width ); + this.y = Rand( height ); + + // Nil initial velocity. + this.vx = this.vy = 0; + + // A visual element---initially none + this.elt = null; + } + + // Turn this into a class. + new Mote(); + + // Mote::applyForce() -- Adjust velocity + // towards the given position. + // Warning: Pseudo-physics -- not really + // governed by any /real/ physical principles. + Mote.prototype.applyForce = function(pos, mag) + { + if( pos[0] > this.x ) + this.vx += mag; + else if( pos[0] < this.x ) + this.vx -= mag; + + if( pos[1] > this.y ) + this.vy += mag; + else if( pos[1] < this.y ) + this.vy -= mag; + } + + // Mote::capVelocity() -- Apply an upper limit + // on mote velocity. + Mote.prototype.capVelocity = function() + { + var max = parseInt( document.getElementById('max_velocity').value ); + + if( max < this.vx ) + this.vx = max; + else if( -max > this.vx ) + this.vx = -max; + + if( max < this.vy ) + this.vy = max; + else if( -max > this.vy ) + this.vy = -max; + } + + // Mote::capPosition() -- Apply an upper/lower limit + // on mote position. + Mote.prototype.capPosition = function() + { + var dims = Dimensions(); + if( this.x < 0 ) + this.x = 0; + else if( this.x >= dims[0] ) + this.x = dims[0]-1; + + if( this.y < 0 ) + this.y = 0; + else if( this.y >= dims[1] ) + this.y = dims[1]-1; + } + + // Mote::move() -- move a mote, update the screen. + Mote.prototype.move = function() + { + // Apply attraction to cursor. + var attract = parseInt( document.getElementById('attract_cursor').value ); + var cursor = Cursor(); + this.applyForce(cursor, attract); + + // Apply repulsion from average mote position. + var repel = parseInt( document.getElementById('repel_peer').value ); + var average = AverageMotePosition(); + this.applyForce(average, -repel); + + // Add some randomness to the velocity. + this.vx += Rand(3)-1; + this.vy += Rand(3)-1; + + // Put an upper limit on velocity. + this.capVelocity(); + + // Apply velocity. + var old_x = this.x, old_y = this.y; + this.x += this.vx; + this.y += this.vy; + this.capPosition(); + + // Draw it. + + if( this.elt === null ) + { + var svg = 'http://www.w3.org/2000/svg'; + this.elt = document.createElementNS(svg,'line'); + this.elt.setAttributeNS(null,'stroke','green'); + this.elt.setAttributeNS(null,'stroke-width','3'); + this.elt.setAttributeNS(null,'stroke-opacity','0.5'); + Display().appendChild( this.elt ); + } + + this.elt.setAttributeNS(null,'x1',old_x); + this.elt.setAttributeNS(null,'y1',old_y); + + this.elt.setAttributeNS(null,'x2',this.x); + this.elt.setAttributeNS(null,'y2',this.y); + } + + + function update() + { + // First call? + if( !motes ) + motes = []; + + // How many motes should there be? + var num = parseInt( document.getElementById('num_motes').value ); + if( num < 0 ) + num = 0; + + // Make sure we have exactly that many... + // Too few? + while( motes.length < num ) + motes.push( new Mote() ); + // Or too many? + if( num == 0 ) + motes = []; + else if( motes.length > num ) + motes = motes.slice(0,num-1); + + // Move a random mote + if( motes.length > 0 ) + motes[ Rand( motes.length ) ].move(); + + // And do this again in 1/100 sec + setTimeout('update()', 10); + } + ]]> + </script> + </body> +</html> +</pre> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody><tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> +</tbody></table> +</div> +</div> + +<div id="SL_shadow_translation_result" style=""> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody><tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> +</tbody></table> +</div> +</div> +</div> diff --git a/files/pt-pt/web/svg/namespaces_crash_course/index.html b/files/pt-pt/web/svg/namespaces_crash_course/index.html new file mode 100644 index 0000000000..54a6d077b4 --- /dev/null +++ b/files/pt-pt/web/svg/namespaces_crash_course/index.html @@ -0,0 +1,266 @@ +--- +title: Namespaces Crash Course +slug: Web/SVG/Namespaces_Crash_Course +tags: + - NeedsTranslation + - SVG + - XML +translation_of: Web/SVG/Namespaces_Crash_Course +--- +<p>As an <a href="/en-US/docs/Glossary/XML" title="en-US/docs/Glossary/XML">XML</a> dialect, <a href="/en-US/docs/Web/SVG" title="en-US/docs/Web/SVG">SVG</a> is namespaced. It is important to understand the concept of namespaces and how they are used if you plan to author SVG content. Versions of SVG viewers prior to the release of Firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-XML dialect supporting user agents such as <a href="/en-US/docs/Mozilla/Gecko" title="en-US/docs/Mozilla/Gecko">Gecko</a>-based browsers which must be very strict. Take some time to understand namespaces now and it will save you all sorts of headaches in the future.</p> + +<h3 id="Background">Background</h3> + +<p>It has been a long standing goal of the W3C to make it possible for different types of XML based content to be mixed together in the same XML file. For example, SVG and <a href="/en-US/docs/Web/MathML" title="en-US/docs/Web/MathML">MathML</a> might be incorporated directly into an XHTML based scientific document. Being able to mix content types like this has many advantages, but it also required a very real problem to be solved.</p> + +<p>Naturally, each XML dialect defines the meaning of the markup tag names described in its specification. The problem with mixing content from different XML dialects in a single XML document is that the tags defined by one dialect may have the same name as tags defined by another. For example, both XHTML and SVG have a <code><title></code> tag. How should the user agent distinguish between the two? In fact how does the user agent tell when XML content is something it knows about, and not just a meaningless XML file containing arbitrary tag names unknown to it?</p> + +<p>Contrary to popular opinion, the answer to this question is not "it can tell from the <code>DOCTYPE</code> declaration". DTDs were never designed with mixed content in mind, and past attempts to create mixed content DTDs are now considered to have failed. XML, and some XML dialects (SVG included), don't require a <code>DOCTYPE</code> declaration, and SVG 1.2 won't even have one. The fact that <code>DOCTYPE</code> declarations (usually) match the content in single content type files is merely coincidental. DTDs are for validation only, not identification of content. User agents that cheat and identify XML content using its DOCTYPE declaration cause harm.</p> + +<p>The real answer to the question is that XML content tells the user agent which dialect the tag names belong to by giving the tags explicit "namespace declarations".</p> + +<h3 id="Declaring_namespaces" name="Declaring_namespaces">Declaring namespaces</h3> + +<p>So what do these namespace declarations look like, and where do they go? Here is a short example.</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg"> + <!-- more tags here --> +</svg> +</pre> + +<p>The namespace declaration is provided by the <code>xmlns</code> attribute. This attribute says that the <code><svg></code> tag and its child tags belong to whichever XML dialect has the namespace name <span class="nowiki">'http://www.w3.org/2000/svg'</span> which is, of course, SVG. Note the namespace declaration only needs to be provided once on a root tag. The declaration defines the <em>default</em> namespace, so the user agent knows that all the <code><svg></code> tag's descendant tags also belong to the same namespace. User agents check to see if they recognize the namespace name to determine if they know how to handle the markup.</p> + +<p>Note that namespace names are just strings, so the fact that the SVG namespace name also looks like a URI isn't important. URIs are commonly used because they are unique, the intention is not to "link" somewhere. (In fact URIs are used so frequently that the term "namespace URI" is commonly used instead of "namespace name".)</p> + +<h4 id="Redeclaring_the_default_namespace" name="Redeclaring_the_default_namespace">Redeclaring the default namespace</h4> + +<p>So if all the descendants of the root tag are also defined to be in the default namespace, how do you mix in content from another namespace? Easy. You just redefine the default namespace. Here's a short example.</p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <!-- some XHTML tags here --> + <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> + <!-- some SVG tags here --> + </svg> + <!-- some XHTML tags here --> + </body> +</html> +</pre> + +<p>In this example the <code>xmlns</code> attribute on the root <code><html></code> tag declares the default namespace to be XHTML. As a result it and all its child tags are interpreted by the user agent as belonging to XHTML, except for the <code><svg></code> tag. The <code><svg></code> tag has its own <code>xmlns</code> attribute, and by redeclaring the default namespace, this tells the user agent that the <code><svg></code> tag and its descendants (unless they also redeclare the default namespace) belong to SVG.</p> + +<p>See, namespaces really aren't that hard.</p> + +<h4 id="Declaring_namespace_prefixes" name="Declaring_namespace_prefixes">Declaring namespace prefixes</h4> + +<p>XML dialects not only define their own tags, but also their own attributes. By default, attributes don't have a namespace at all, and are only known to be unique because they appear on an element that itself has a unique name. However, sometimes it is necessary to define attributes so that they can be reused on many different elements and still be considered to be the same attribute, independently of the element with which they are used. A very good example of this is the <code>href</code> attribute defined by the XLink specification. This attribute is commonly used by other XML dialects as a means to link to external resources. But how do you tell the user agent which dialect the attribute belongs to, in this case XLink? Consider the following example.</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="cool-script.js" type="text/ecmascript"/> +</svg> +</pre> + +<p>This example has the rather unusual looking attribute <code>xmlns:xlink</code>. As you may guess from the first 'xmlns' part, this is another namespace declaration. However, instead of setting the default namespace, this namespace declaration sets the namespace for something called a "namespace prefix". In this case, we have chosen to use the prefix <code>xlink</code> (the second part) since the prefix will be used to tell the user agent about attributes that belong to XLink.</p> + +<p>As their name suggests, namespace prefixes are used to prefix attribute names and tag names. This is done by putting the namespace prefix and a colon before the attribute name as shown on the <code><script></code> tag in the example above. This tells the user agent that that particular attribute belongs to the namespace assigned to the namespace prefix (XLink), and is an attribute that can be used with the same meaning on other tags.</p> + +<p>Note that it is an XML error to use a prefix that hasn't been bound to a namespace name. The binding created by the <code>xmlns:xlink</code> attribute in the example above is absolutely essential if the <code>xlink:href</code> attribute isn't to cause an error. This XLink attribute is also frequently used in SVG on the <code><a></code>, <code><use></code> and <code><image></code> tags among others, so it's a good idea to always include the XLink declaration in your documents.</p> + +<p>As an aside, it's useful to know that namespace prefixes can also be used for tag names. This tells the user agent that that particular tag (but not its children this time!) belongs to the namespace assigned to the prefix. Knowing this will save you some confusion if you come across markup like that in the following example:</p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> + <body> + <h1>SVG embedded inline in XHTML</h1> + <svg:svg width="300px" height="200px"> + <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> + </svg:svg> + </body> +</html> +</pre> + +<p>Note that because a namespace prefix is used for the <code><svg:svg></code> tag and its child <code><svg:circle></code>, it wasn't necessary to redeclare the default namespace. In general though it is better to redeclare the default namespace rather than prefix lots of tags in this way.</p> + +<h3 id="Scripting_in_namespaced_XML" name="Scripting_in_namespaced_XML">Scripting in namespaced XML</h3> + +<p>Namespaces affect not only markup, but also scripting. If you write scripts for namespaced XML such as SVG, read on.</p> + +<p>The <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM Level 1</a> recommendation was created before the <a class="external" href="http://www.w3.org/TR/REC-xml-names/">original Namespaces in XML</a> recommendation was released; therefore, DOM1 isn't namespace aware. This causes problems for namespaced XML such as SVG. To resolve these problems, <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a> added namespace aware equivalents of all the applicable DOM Level 1 methods. When scripting SVG, <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">it is important to use the namespace aware methods</a>. The table below lists the DOM1 methods that shouldn't be used in SVG, along with their equivalent DOM2 counterparts that should be used instead.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>DOM1 (don't use)</th> + <th>DOM2 (use these instead!)</th> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute">createAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS">createAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement">createElement</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">createElementNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">getAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">getAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">getAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">getAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName">getElementsByTagName</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">getElementsByTagNameNS</a> (also <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">added to Element</a>)</td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem">getNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS">getNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#">hasAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">hasAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">removeAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">removeAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem">removeNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS">removeNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">setAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">setAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">setAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">setAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem">setNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS">setNamedItemNS</a></td> + </tr> + </tbody> +</table> + +<p>The first argument for all the DOM2 namespace aware methods must be the namespace name (also known as the namespace URI) of the element or attribute in question. For SVG <strong>elements</strong> this is <span class="nowiki">'http://www.w3.org/2000/svg'</span>. However, note carefully: the <a class="external" href="http://www.w3.org/TR/xml-names11/#defaulting">Namespaces in XML 1.1</a> recommendation states that the namespace name for attributes without a prefix does not have a value. In other words, although the attributes belong to the namespace of the tag, you do not use the tag's namespace name. Instead, <strong>you must use null as the namespace name for unqualified (prefixless) attributes</strong>. So, to create an SVG <code>rect</code> <em>element</em> using <code>document.createElementNS()</code>, you must write:</p> + +<pre><code class="language-javascript">document.createElementNS('http://www.w3.org/2000/svg', 'rect');</code></pre> + +<p>But to retrieve the value of the <code>x</code> <em>attribute</em> on an SVG <code>rect</code> element, you must write:</p> + +<pre class="eval"><code class="language-javascript">rect.getAttributeNS(<strong>null</strong>, 'x');</code></pre> + +<p>Note that this isn't the case for attributes <em>with</em> a namespace prefix (attributes that don't belong to the same XML dialect as the tag). Attributes such as the <code>xlink:href</code> attribute require the namespace name that was assigned to that prefix (<span class="nowiki">http://www.w3.org/1999/xlink</span> for XLink). Hence to get the value of the <code>xlink:href</code> attribute of an <code><a></code> element in SVG you would write:</p> + +<pre><code class="language-javascript">elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');</code></pre> + +<p>For setting attributes that have a namespace, it is recommended (but not required) that you also include their prefix in the second argument so that the DOM can later be more easily converted back to XML (if for instance you want to send it back to the server). For example:</p> + +<pre><code class="language-javascript">elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');</code></pre> + +<p>As a final example, here's a demonstration of how you should dynamically create an <code><image></code> element using script:</p> + +<pre><code class="language-javascript">var SVG_NS = 'http://www.w3.org/2000/svg'; +var XLink_NS = 'http://www.w3.org/1999/xlink'; +var image = document.createElementNS(SVG_NS, 'image'); +image.setAttributeNS(null, 'width', '100'); +image.setAttributeNS(null, 'height', '100'); +image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png'); +</code></pre> + +<h3 id="Conclusion" name="Conclusion">Conclusão</h3> + +<p>Make sure you always declare the namespaces you use in your XML files. If you don't, user agents such as Firefox won't recognize your content and will simply show the XML markup or inform the user that there's an error in the XML. It's a good idea to use a template that includes all the commonly used namespace declarations when creating new SVG files. If you don't already have one, make one up starting with the following code:</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +</svg> +</pre> + +<p>Even if you don't use all those namespaces in a particular document, there's no harm in including the namespace declarations. It may save you from some annoying errors if you end up adding content from one of the unused namespaces at a later date.</p> + +<h3 id="A_full_example" name="A_full_example">Um exemplo completo</h3> + +<p>Para um exemplo completo, consulte <a href="/pt-PT/docs/Web/SVG/Namespaces_Crash_Course/Exemplo">SVG: Namespaces Crash Course: Exemplo</a>.</p> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody><tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> +</tbody></table> +</div> +</div> + +<div id="SL_shadow_translation_result" style=""> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody><tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> +</tbody></table> +</div> +</div> +</div> diff --git a/files/pt-pt/web/svg/svg_animacao_com_smil/index.html b/files/pt-pt/web/svg/svg_animacao_com_smil/index.html new file mode 100644 index 0000000000..be898b1037 --- /dev/null +++ b/files/pt-pt/web/svg/svg_animacao_com_smil/index.html @@ -0,0 +1,125 @@ +--- +title: Animação SVG com SMIL +slug: Web/SVG/SVG_animacao_com_SMIL +tags: + - Animação + - Animação de SVG + - Firefox 4 + - Gecko 2.0 + - SVG +translation_of: Web/SVG/SVG_animation_with_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> +</div> + +<p>Firefox 4 introduziu suporte para a animação de <a href="/en/SVG" title="en/SVG">SVG</a> utilizando <a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL). SMIL permite-lhe:</p> + +<ul> + <li>animate the numeric attributes of an element (x, y, ...)</li> + <li>animate transform attributes (translation or rotation)</li> + <li>animate color attributes</li> + <li>follow a motion path</li> +</ul> + +<p>This is done adding an SVG element like <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}</span> inside the SVG element to animate. Below are examples for the four different ways.</p> + +<h2 id="Animar_atributos_de_um_elemento">Animar atributos de um elemento</h2> + +<p>The following example animates the <strong>cx</strong> attribute of a circle. To do so, we add an <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} element inside the </span><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("circle") }} element. The important attributes for </span><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} are:</span></p> + +<dl> + <dt><strong>attributeName</strong></dt> + <dd>The name of the attribute to animate.</dd> + <dt>from</dt> + <dd>The initial value of the attribute.</dd> + <dt>to</dt> + <dd>The final value.</dd> + <dt>dur</dt> + <dd>The duration of the animation (for example, write '5s' for 5 seconds).</dd> +</dl> + +<p>If you want to animate more attributes inside the same element, just add more {{ SVGElement("animate") }} elements.</p> + +<pre class="brush: html"><svg width="300" height="100"> + <title>Attribute Animation with SMIL</title> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> + <animate + attributeName="cx" from="0" to="500" + dur="5s" repeatCount="indefinite" /> + </circle> +</svg></pre> + +<p>{{ EmbedLiveSample('Animating_attributes_of_an_element', '100%', 120) }}</p> + +<h2 id="Animar_os_atributos_transform">Animar os atributos "transform"</h2> + +<p><span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("animateTransform") }} element let you animate <strong>transform</strong> attributes. This new element is necessary because we are not animating a simple attribute like <strong>x</strong> which is just a number. Rotation attributes look like this: <code>rotation(theta, x, y)</code>, where <code>theta</code> is the angle in degrees, and <code>x</code> and <code>y</code> are absolute positions. In the example below, we animate the center of the rotation and the angle.</span></p> + +<pre class="brush: html"><svg width="300" height="100"> + <title>SVG SMIL Animate with transform</title> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> + <animateTransform + attributeName="transform" + begin="0s" + dur="20s" + type="rotate" + from="0 60 60" + to="360 100 60" + repeatCount="indefinite" + /> + </rect> +</svg> +</pre> + +<p>{{ EmbedLiveSample('Animating_the_transform_attributes', '100%', 120) }}</p> + +<h2 id="Animation_following_a_path">Animation following a path</h2> + +<p><span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("animateMotion") }} element lets you animate an element position and rotation according to a path. </span>The path is defined the same way as in <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("path") }}. You can set the attribute to define whether the object rotates following the tangent of the path. </span></p> + +<h3 id="Example_1_Linear_motion">Example 1: Linear motion</h3> + +<p>In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. The animation here is handled by the {{ SVGElement("animateMotion") }} element. In this case, we're establishing a path consisting of a <strong>M</strong>oveTo command to establish the starting point for the animation, then the <strong>H</strong>orizontal-line command to move the circle 300 pixels to the right, followed by the <strong>Z</strong> command, which closes the path, establishing a loop back to the beginning. By setting the value of the <strong>repeatCount</strong> attribute to <code>indefinite</code>, we indicate that the animation should loop forever, as long as the SVG image exists.</p> + +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="300" height="100"> + <title>SVG SMIL Animate with Path</title> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> + <animateMotion + path="M 0 0 H 300 Z" + dur="3s" repeatCount="indefinite" /> + </circle> +</svg> +</pre> + +<p>{{ EmbedLiveSample('Example_1_Linear_motion', '100%', 120) }}</p> + +<p><a href="https://developer.mozilla.org/samples/svg/svganimdemo1.html">View live sample</a></p> + +<h3 id="Example_2_Curved_motion">Example 2: Curved motion</h3> + +<p>Same example as before with a curved path and following the direction of the path.</p> + +<pre class="brush: html"><svg width="300" height="100"> + <title>SVG SMIL Animate with Path</title> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1"> + <animateMotion + path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" + dur="3s" repeatCount="indefinite" rotate="auto" /> + </rect> +</svg> +</pre> + +<p>{{ EmbedLiveSample('Example_2_Curved_motion', '100%', 120) }}</p> + +<h2 id="Consultar_também">Consultar também</h2> + +<ul> + <li><a href="/pt-PT/docs/Web/SVG" title="en/SVG">SVG</a></li> + <li><a class="external" href="http://www.w3.org/TR/SVG/animate.html" title="http://www.w3.org/TR/SVG/animate.html">Especificação de Animação de SVG</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Especificação de SMIL</a></li> +</ul> diff --git a/files/pt-pt/web/svg/tutorial/index.html b/files/pt-pt/web/svg/tutorial/index.html new file mode 100644 index 0000000000..9c162f0342 --- /dev/null +++ b/files/pt-pt/web/svg/tutorial/index.html @@ -0,0 +1,32 @@ +--- +title: SGV - Tutorial +slug: Web/SVG/Tutorial +translation_of: Web/SVG/Tutorial +--- +<p>Scalable Vector Graphics, <a href="/pt/SVG" title="pt/SVG">SVG</a>, é uma linguagem baseada em XML para construir gráficos. O SVG foi parcialmente implementado no Firefox, Opera, navegadores WebKit, Internet Explorer e outros navegadores.</p> + +<p>Este tutorial visa explicar como funciona um SVG internamente e tem detalhes técnicos. Se você apenas quer desenhar imagens bonitas, você pode encontrar recursos úteis na <a href="http://inkscape.org/doc/" class="external" title="http://inkscape.org/doc/">Página de documentação do Inkscape</a>. Outra boa introdução ao SVG está disponível em <a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" class="external" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>, pela W3C.</p> + +<div class="note">O tutorial está no início de seu desenvolvimento. Se você puder, por favor ajude lapidando e escrevendo um parágrafo ou dois. Pontos extras por escrever a página inteira.</div> + +<h2 id="Introdução_ao_SVG">Introdução ao SVG</h2> + +<ul> + <li><a href="/Introducao" title="Introducao">Introdução</a></li> + <li>Iniciando</li> + <li>Posições</li> + <li>Formas Básicas</li> + <li>Caminhos</li> + <li>Preenchimentos e Linhas</li> + <li>Gradientes</li> + <li>Padrões</li> + <li>Textos</li> + <li>Transformações Básicas</li> + <li>Cortes e Máscaras</li> + <li>Outros Conteúdos em SVG</li> + <li>Efeitos de Filtro</li> + <li>Fontes em SVG</li> + <li>(muitas outras entradas aqui)</li> + <li>Ferramentas para SVG</li> + <li>Outros Tutoriais</li> +</ul> diff --git a/files/pt-pt/web/svg/tutorial/introducao/index.html b/files/pt-pt/web/svg/tutorial/introducao/index.html new file mode 100644 index 0000000000..287de67a14 --- /dev/null +++ b/files/pt-pt/web/svg/tutorial/introducao/index.html @@ -0,0 +1,52 @@ +--- +title: Introdução +slug: Web/SVG/Tutorial/Introducao +tags: + - Guía + - Precisa de Atualização + - Principiante + - SVG + - SVG - Tutorial + - Tutorial +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> is an <a href="/en-US/XML" title="en-US/XML">XML</a> language, similar to <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, which can be used to draw vector graphics, such as the ones shown to the right. It can be used to create an image either by specifying all the lines and shapes necessary, by modifying already existing raster images, or by a combination of both. The image and its components can also be transformed, composited together, or filtered to change their appearance completely.</p> + +<p>SVG came about in 1999 after several competing formats had been submitted to the <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a> and failed to be fully ratified. SVG is supported by all major <a href="https://caniuse.com/#search=svg">browsers</a>. A downside is loading SVG can be slow. SVG does offer benefits, some of which include having a <a href="/en-US/docs/Web/API">DOM interface</a> available for it, and not requiring third-party extensions. Whether or not to use it often depends on your specific use case.</p> + + + + + +<h3 id="Ingredientes_básicos">Ingredientes básicos</h3> + +<p><a href="/en-US/docs/Web/HTML">HTML</a> provides elements for defining headers, paragraphs, tables, and so on. In much the same way SVG provides elements for circles, rectangles, and simple and complex curves. A simple SVG document consists of nothing more than the {{ SVGElement('svg') }} root element and several basic shapes that build a graphic together. In addition there is the {{ SVGElement('g') }} element, which is used to group several basic shapes together.</p> + +<p>Starting from there, the SVG image can become arbitrarily complex. SVG supports gradients, rotations, filter effects, animations, interactivity with JavaScript, and so on. But all these extra features of the language rely on this relatively small set of elements to define the graphics area.</p> + +<h3 id="Before_you_start" name="Before_you_start">Antes de começar</h3> + +<p>There are a number of drawing applications available such as <a class="external" href="http://www.inkscape.org/">Inkscape</a> which are free and use SVG as their native file format. However, this tutorial will rely on the trusty XML or text editor (your choice). The idea is to teach the internals of SVG to those who want to understand it, and that is best done by dirtying your hands with a bit of markup. You should note your final goal though. Not all SVG viewers are equal and so there is a good chance that something written for one app will not display exactly the same in another, simply because they support different levels of the SVG specification or another specification that you are using along with SVG (that is, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> or <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> + +<p>SVG is supported in all modern browsers and even a couple versions back in some cases. A fairly complete browser support table can be found on <a href="http://caniuse.com/svg">Can I use</a>. Firefox has supported some SVG content since version 1.5, and that support level has been growing with each release since. Hopefully, along with the tutorial here, MDN can help developers keep up with the differences between Gecko and some of the other major implementations.</p> + +<p>Before starting you should have a basic understanding of XML or another markup language such as <abbr title="HyperText Markup Language">HTML</abbr>. If you are not too familiar with XML, here are some guidelines to keep in mind:</p> + +<ul> + <li>SVG elements and attributes should all be entered in the case shown here since XML is case-sensitive (unlike HTML).</li> + <li>Attribute values in SVG must be placed inside quotes, even if they are numbers.</li> +</ul> + +<p>SVG is a huge specification. This tutorial attempts to cover the basics. Once you are familiar you should be able to use the <a href="/en-US/SVG/Element" title="en-US/SVG/Element">Element Reference</a> and the <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces" title="en-US/SVG/Interface">Interface Reference</a> to find out anything else you need to know.</p> + +<h3 id="Flavors_of_SVG">Flavors of SVG</h3> + +<p>Since becoming a recommendation in 2003, the most recent "full" SVG version is 1.1. It builds on top of SVG 1.0, but adds more modularization to ease implementation. <a href="http://www.w3.org/TR/SVG/">The second edition of SVG 1.1</a> became a Recommendation in 2011. "Full" SVG 1.2 was meant to be the next major release of SVG. It was dropped for the upcoming <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, which is under heavy development right now and follows a similar approach to CSS 3 in that it splits components into several loosely coupled specifications.</p> + +<p>Apart from the full SVG recommendations, the working group at the W3C introduced SVG Tiny and SVG Basic in 2003. These two profiles are aimed mainly at mobile devices. The first, SVG Tiny, should yield graphics primitives for small devices with low capabilities. SVG Basic offers many features of full SVG, but doesn't include the ones which are hard to implement or heavy to render (like animations). In 2008, SVG Tiny 1.2 became a W3C Recommendation.</p> + +<p>There were plans for an SVG Print specification, which would add support for multiple pages and enhanced color management. This work was discontinued.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> diff --git a/files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html b/files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html new file mode 100644 index 0000000000..5ca7a4c9e7 --- /dev/null +++ b/files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html @@ -0,0 +1,179 @@ +--- +title: Introdução à SVG em HTML +slug: Web/SVG/Tutorial/SVG_na_Introducao_HTML +tags: + - Intermediário + - Precisa de Atualização + - SVG +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<h2 id="Overview" name="Overview">Resumo</h2> + +<p>This article and its associated example shows how to use inline <a href="/pt-PT/docs/Web/SVG" title="SVG">SVG</a> to provide a background picture for a form. It shows how <a href="/pt-PT/docs/Web/JavaScript" title="JavaScript">JavaScript</a> and <a href="/pt-PT/docs/Web/CSS" title="CSS">CSS</a> can be used to manipulate the picture in the same way you would script regular XHTML. Note that the example will only work in browsers that support XHTML (not HTML) and SVG integration.</p> + +<h2 id="Source" name="Source">Fonte</h2> + +<p>Aqui tem a fonte para <a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">o exemplo</a>:</p> + +<pre class="brush: html"><html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>XTech SVG Demo</title> +<style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } +</style> +<script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } +</script> +</head> +<body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> +<form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><input type="button" value="Activate!" onclick="signalError();" /></p> + </fieldset> +</form> + +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> +</svg> +</body> +</html> +</pre> + +<h2 id="Discussion" name="Discussion">Discussão</h2> + +<p>The page is mainly regular XHTML, CSS and JavaScript. The only interesting part is the <svg> element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS. When the user enters something incorrect into the form, the script sets the <code>invalid</code> attribute on the <body>, and a style rule changes the gradient <code>end-stop</code> color to red. (Another style rule makes an error message appear.)</p> + +<p>This approach has the following points in its favor:</p> + +<ul> + <li>We have taken a regular XHTML form that could have been part of an existing Web site, and added an attractive, interactive background</li> + <li>The approach is backwards compatible to browsers that do not support SVG; simply, no background appears in them</li> + <li>It's very simple and performs very well</li> + <li>The picture dynamically sizes itself to the required size in an intelligent way</li> + <li>We can have declarative style rules applying to both HTML and SVG</li> + <li>The same script manipulates both HTML and SVG</li> + <li>The document is entirely standards-based</li> +</ul> + +<div class="note"> +<p>To add a linked image with DOM methods to an embedded SVG element, one has to use <code>setAttributeNS</code> to set <code>href</code>. Like in the following example:</p> + +<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image"); +img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); + + +</pre> +</div> + +<h2 id="Details" name="Details">Detalhes</h2> + +<p>The <code>viewBox</code> attribute establishes a logical coordinate system which the SVG picture's coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.</p> + +<p>The <code>preserveAspectRatio</code> attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.</p> + +<p>The <code>style</code> attribute pins the SVG element to the background of the form.</p> + +<h2 id="Related_Links" name="Related_Links">Hiperligações Relacionadas</h2> + +<ul> + <li>Another SVG in XHTML example: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li> + <li><a class="external" href="/pt-PT/docs/Web/SVG/Namespaces_Crash_Course/Exemplo">Working example</a> that works in both Mozilla and in Internet Explorer with Adobe's SVG Viewer installed. (For inline SVG to work in both Firefox and Internet Explorer it is necessary to serve documents with a different Content-Type to each browser. For this reason, if you're behind a proxy server that caches the page, the example wont work in the second browser you load it in because it will receive the wrong Content-Type.)</li> +</ul> + + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: none; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody><tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> +</tbody></table> +</div> +</div> + +<div id="SL_shadow_translation_result" style=""> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody><tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> +</tbody></table> +</div> +</div> +</div> |