initial commit

1 files changed, 213 insertions, 0 deletions

diff --git a/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.html b/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.html
new file mode 100644
index 0000000000..69d74d91db
--- /dev/null
+++ b/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.html
@@ -0,0 +1,213 @@
+---
+title: Applying SVG effects to HTML content
+slug: Web/SVG/Applying_SVG_effects_to_HTML_content
+tags:
+  - CSS
+  - Guía
+  - SVG
+  - XHTML
+translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
+---
+<div>{{gecko_minversion_header("1.9.1")}}</div>
+
+<p>Firefox 3.5 introduziu suporte para uso do <a href="/en-US/docs/SVG" title="SVG">SVG</a> como um componente do <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> em ordem para introduzir efeitos SVG no conteúdo HTML.</p>
+
+<p>Você pode embutir o SVG nos estilos dentro do mesmo documento, ou com um <em>stylesheet</em> externo.</p>
+
+<div class="note">
+<p> Referencias para SVG em arquivos externos podem ter mesma origem como as do documento originário.</p>
+</div>
+
+<h2 id="Usando_SVG_embutido">Usando SVG embutido</h2>
+
+<p>Para aplicar um efeito SVG usando o estilo CSS, você precisa primeiro criar um estilo CSS que faz referência ao SVG que deseja aplicar.</p>
+
+<pre class="brush: html">&lt;style&gt;.stylename { mask: url(#localstyle); }&lt;/style&gt;
+</pre>
+
+<p>Dentro do exemplo acima, o novo estilo, identificado como "stylename", é uma máscara SVG referenciada pelo ID "localstyle". Quando isso é estabelecido, a máscara pode ser aplicada a qualquer elemento usando o estilo CSS.</p>
+
+<p>Isso soa mais complicado do que realmente é; Olharemos mais de perto os exemplos para termos uma boa ideia como isso funciona.</p>
+
+<p>Então você pode aplicar três estilos: O uso do <code>mask</code>, <code>clip-path</code>, ou <code>filter</code>.</p>
+
+<h3 id="Exemplo_Masking">Exemplo: Masking</h3>
+
+<p>Por exemplo, você pod estabelecer um estilo CSS que provêm uma máscara gradiente para um documento HTML usando código SVG similar ao seguinte:</p>
+
+<div class="warning">
+<p><strong><code>Namespacing</code> não é válido no HTML5</strong>, deixe de lado as tags "svg:"  para documentos HTML.</p>
+</div>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"&gt;
+    &lt;linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"&gt;
+      &lt;stop stop-color="white" offset="0"/&gt;
+      &lt;stop stop-color="white" stop-opacity="0" offset="1"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/&gt;
+    &lt;rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/&gt;
+  &lt;/mask&gt;
+&lt;/svg&gt;
+</pre>
+
+<pre class="brush: css">.target {
+  mask: url(#m1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+  margin: 1em;
+}</pre>
+
+<p>Preste atenção na linha 1, a máscara é especificada usando um URL para o ID "#m1", que é um ID para a máscara SVG específicada abaixo. Todo o que foi especificado detalha mais sobre a máscara de gradiente.</p>
+
+<p>Na realidade aplicar o efeito SVG para XHTML ou HTML é simplesmente feito atribuindo um estilo <code>target </code>definido abaixo do elemento, como esse:</p>
+
+<pre class="brush: html">&lt;p class="target" style="background:lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;p&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;</pre>
+
+<p>O exemplo acima pode rodar com uma máscara aplicadaa ele.</p>
+
+<p>{{ EmbedLiveSample('Exemplo_Masking', 360, 270) }}</p>
+
+<h3 id="Exemplo_Clipping">Exemplo: Clipping</h3>
+
+<p>Esse exemplo demonstra como usar SVG to recortar conteúdo HTML. Esse exemplo demonstra como usar SVG para recortar conteúdo HTML. Quando você ver a <a href="/@api/deki/files/3214/=clipdemo.xhtml">demonstração</a>, não irá notar que as áreas quentes para links são recortes.</p>
+
+<pre class="brush: html">&lt;p class="target" style="background:lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;p&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;button onclick="toggleRadius()"&gt;Toggle radius&lt;/button&gt;
+&lt;svg height="0"&gt;
+  &lt;clipPath id="c1" clipPathUnits="objectBoundingBox"&gt;
+    &lt;circle cx="0.25" cy="0.25" r="0.25" id="circle"/&gt;
+    &lt;rect x="0.5" y="0.2" width="0.5" height="0.8"/&gt;
+  &lt;/clipPath&gt;
+&lt;/svg&gt;
+</pre>
+
+<pre class="brush: css">.target {
+  clip-path: url(#c1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+  margin: 1em;
+}</pre>
+
+<p>Isso estabelece uma área recortada composta por um círculo e um retângulo, e atribui para ela ID "#c1". Isso é então referenciado por um estilo. Quando o estilo <code>target</code> é estabelecido desse modo, <code>clip-path</code> pode ser atribuido para qualquer outro elemento.</p>
+
+<div class="note">
+<p>Também você pode fazer mudanças no SVG em tempo real e ver suas alterações imediatamente afetar a renderização do HTML. Por exemplo, você pode redimensionar o círculo dentro do caminho do recorte estabelecendo o seguinte:</p>
+</div>
+
+<pre class="brush: js">function toggleRadius() {
+  var circle = document.getElementById("circle");
+  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Exemplo_Clipping', 360,290) }}</p>
+
+<p>O exemplo inclui um botão que você pode clicar para alterar o caminho do recorte <em>(clip-path) </em>e ver as alterações tomando efeito.</p>
+
+<h3 id="Exemplo_Filtering">Exemplo: Filtering</h3>
+
+<p>Esse exemplo demonstra como você pode aplicar o filtro HTML ao conteúdo usado no SVG. Isso estabelece vários filtros, que podem ser aplicados para uso de estilos que cada um dos três elementos dentro dos estados normal e <em>mouse hover</em>.</p>
+
+<p>Qualquer filtro SVG pode ser aplicado desse modo. Pode exemplo, para aplicar desfoque Gaussiano, você pode usar:</p>
+
+<pre class="brush: xml">&lt;svg:filter id="f1"&gt;
+  &lt;svg:feGaussianBlur stdDeviation="3"/&gt;
+&lt;/svg:filter&gt;
+</pre>
+
+<p>Você pode também aplicar cor a matriz, como este:</p>
+
+<pre class="brush: xml">&lt;svg:filter id="f2"&gt;
+  &lt;svg: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"/&gt;
+&lt;/svg:filter&gt;
+</pre>
+
+<p>Esses são só dois dos cinco filtros demonstrados nessa seção. Certifique-se de olhar o conteúdo do código ao final da seção se você quiser ver mais.</p>
+
+<p>Os cinco filtros são aplicados usando o seguinte CSS:</p>
+
+<pre class="brush: html">&lt;style&gt;
+    p.target { filter:url(#f3); }
+    p.target:hover { filter:url(#f5); }
+    b.target { filter:url(#f1); }
+    b.target:hover { filter:url(#f4); }
+    iframe.target { filter:url(#f2); }
+    iframe.target:hover { filter:url(#f3); }
+&lt;/style&gt;
+</pre>
+
+<p><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
+
+<h3 id="Exemplo_Texto_Borrado">Exemplo: Texto Borrado</h3>
+
+<p>Para borrar um texto há um webkit baseado dos navegadores com o (prefixo) filtro CSS chamado blur. Você pode arquivar o mesmo efeito usando filtros SVG.</p>
+
+<pre class="brush: html"> &lt;p class="blur"&gt;Time to clean my glasses&lt;/p&gt;
+ &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;defs&gt;
+    &lt;filter id="wherearemyglasses" x="0" y="0"&gt;
+      &lt;feGaussianBlur in="SourceGraphic" stdDeviation="1" /&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Você pode aplicar o SVG e o filtro CSS na mesma classe:</p>
+
+<pre class="brush: css">.blur {
+  filter:url(#wherearemyglasses);
+  /* ^ for Firefox */
+  -webkit-filter: blur(1px);
+  /* ^ Webkit browsers */
+  filter: blur(1px);
+}</pre>
+
+<p>{{ EmbedLiveSample('Exemplo_Texto_Burrado', '', '', '') }}</p>
+
+<p>Borrar é um efeito pesado, então assegure-se de usá-lo com moderação, especialmente quando há uma rolagem ou animação.</p>
+
+<h2 id="Usando_referências_externas">Usando referências externas</h2>
+
+<p>O elemento SVG vem sendo usado para clipping, masking, e mais pode ser carregado de um arquivo externo, contanto que seu documento venha da mesma origem da qual seu HTML está para fazer efeito.</p>
+
+<p>Por exemplo, se seu CSS está em um arquivo com nome  <code>default.css</code>, esse pode parecer com isso:</p>
+
+<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre>
+
+<p>O SVG é importado do arquivo com nome <code>resources.svg</code>, usando o clip-path com o ID c1.</p>
+
+<p><span style="font-size: 30.002px; letter-spacing: -1px; line-height: 30.002px;"><strong>Veja também</strong></span></p>
+
+<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>(<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>