From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../index.html | 213 +++++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 files/pt-br/web/svg/applying_svg_effects_to_html_content/index.html (limited to 'files/pt-br/web/svg/applying_svg_effects_to_html_content') 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 +--- +
{{gecko_minversion_header("1.9.1")}}
+ +

Firefox 3.5 introduziu suporte para uso do SVG como um componente do CSS em ordem para introduzir efeitos SVG no conteúdo HTML.

+ +

Você pode embutir o SVG nos estilos dentro do mesmo documento, ou com um stylesheet externo.

+ +
+

 Referencias para SVG em arquivos externos podem ter mesma origem como as do documento originário.

+
+ +

Usando SVG embutido

+ +

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.

+ +
<style>.stylename { mask: url(#localstyle); }</style>
+
+ +

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.

+ +

Isso soa mais complicado do que realmente é; Olharemos mais de perto os exemplos para termos uma boa ideia como isso funciona.

+ +

Então você pode aplicar três estilos: O uso do mask, clip-path, ou filter.

+ +

Exemplo: Masking

+ +

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:

+ +
+

Namespacing não é válido no HTML5, deixe de lado as tags "svg:"  para documentos HTML.

+
+ +
<svg height="0">
+  <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+    <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+      <stop stop-color="white" offset="0"/>
+      <stop stop-color="white" 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="0.5" height="0.8" fill="url(#g)"/>
+  </mask>
+</svg>
+
+ +
.target {
+  mask: url(#m1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+  margin: 1em;
+}
+ +

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.

+ +

Na realidade aplicar o efeito SVG para XHTML ou HTML é simplesmente feito atribuindo um estilo target definido abaixo do elemento, como esse:

+ +
<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>
+ +

O exemplo acima pode rodar com uma máscara aplicadaa ele.

+ +

{{ EmbedLiveSample('Exemplo_Masking', 360, 270) }}

+ +

Exemplo: Clipping

+ +

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 demonstração, não irá notar que as áreas quentes para links são recortes.

+ +
<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="c1" 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>
+
+ +
.target {
+  clip-path: url(#c1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+  margin: 1em;
+}
+ +

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 target é estabelecido desse modo, clip-path pode ser atribuido para qualquer outro elemento.

+ +
+

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:

+
+ +
function toggleRadius() {
+  var circle = document.getElementById("circle");
+  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+}
+
+ +

{{ EmbedLiveSample('Exemplo_Clipping', 360,290) }}

+ +

O exemplo inclui um botão que você pode clicar para alterar o caminho do recorte (clip-path) e ver as alterações tomando efeito.

+ +

Exemplo: Filtering

+ +

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 mouse hover.

+ +

Qualquer filtro SVG pode ser aplicado desse modo. Pode exemplo, para aplicar desfoque Gaussiano, você pode usar:

+ +
<svg:filter id="f1">
+  <svg:feGaussianBlur stdDeviation="3"/>
+</svg:filter>
+
+ +

Você pode também aplicar cor a matriz, como este:

+ +
<svg:filter id="f2">
+  <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"/>
+</svg:filter>
+
+ +

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.

+ +

Os cinco filtros são aplicados usando o seguinte CSS:

+ +
<style>
+    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); }
+</style>
+
+ +

View this example live

+ +

Exemplo: Texto Borrado

+ +

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 class="blur">Time to clean my glasses</p>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <filter id="wherearemyglasses" x="0" y="0">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
+    </filter>
+  </defs>
+</svg>
+
+ +

Você pode aplicar o SVG e o filtro CSS na mesma classe:

+ +
.blur {
+  filter:url(#wherearemyglasses);
+  /* ^ for Firefox */
+  -webkit-filter: blur(1px);
+  /* ^ Webkit browsers */
+  filter: blur(1px);
+}
+ +

{{ EmbedLiveSample('Exemplo_Texto_Burrado', '', '', '') }}

+ +

Borrar é um efeito pesado, então assegure-se de usá-lo com moderação, especialmente quando há uma rolagem ou animação.

+ +

Usando referências externas

+ +

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.

+ +

Por exemplo, se seu CSS está em um arquivo com nome  default.css, esse pode parecer com isso:

+ +
.target { clip-path: url(resources.svg#c1); }
+ +

O SVG é importado do arquivo com nome resources.svg, usando o clip-path com o ID c1.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf