files/es/applying_svg_effects_to_html_content/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

---
title: Aplicación de efectos de SVG para el contenido HTML
slug: Applying_SVG_effects_to_HTML_content
tags:
  - CSS
  - Firefox 3.5
  - Firefox 4.0
  - HTML
  - HTML 5
  - SVG
  - XHTML
---
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Aplicación de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efectos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML.</span></span></p>
<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Firefox</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">3.5</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">introduce</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">soporte para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">como un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">componente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efectos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
<br>
<span class="hps" title="Haz clic para obtener otras posibles traducciones">Puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">especificar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los estilos</span><span title="Haz clic para obtener otras posibles traducciones">, ya sea dentro</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo documento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o dentro de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hoja de estilos externa</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
<div class="note"><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Nota</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Las referencias</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en archivos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">deben</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ser</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de el mismo origen</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de origen</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></div>
<h2 id="Uso_integrado_SVG"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Uso</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">integrado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span></span></h2>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Para aplicar un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efecto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">primero tiene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">crear el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que hace referencia al</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
<pre class="brush: html">&lt;style&gt;.stylename { mask: url(#localstyle); }&lt;/style&gt;
</pre>
<p> <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En el ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">anterior</span><span title="Haz clic para obtener otras posibles traducciones">, el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nuevo estilo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">por "</span><span title="Haz clic para obtener otras posibles traducciones">stylename</span><span title="Haz clic para obtener otras posibles traducciones">,</span><span title="Haz clic para obtener otras posibles traducciones">"</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que hace referencia</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a el identificador</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">localstyle</span><span title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Una vez que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estableció</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplica</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">todos los elementos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
<br>
<span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">suena</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">más</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">complicado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">lo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que realmente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">echar un vistazo a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los ejemplos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tener una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">buena idea de cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">funciona esto</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
<br>
<span class="hps" title="Haz clic para obtener otras posibles traducciones">Hay</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tres</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">pueden aplicar</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la máscara</span><span title="Haz clic para obtener otras posibles traducciones">, el recorrido de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o un filtro</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
<p> </p>
<h3 id="Ejemplo_Enmascaramiento_(Máscara)"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Enmascaramiento (M</span></span><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">áscara)</span></span></h3>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establecer un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">proporciona</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de degradado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">similar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">lo siguiente en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">su</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p>
<p><strong><span style="color: rgb(255, 0, 0);">NOTA:</span> </strong><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El espaciamiento de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nombre no</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es válida</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML 5</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">dejar fuera</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de la</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">svg</span><span title="Haz clic para obtener otras posibles traducciones">:</span><span title="Haz clic para obtener otras posibles traducciones">"</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">las etiquetas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los documentos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en formato HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
<pre class="brush: xml">  &lt;style&gt;.target { mask: url(#m1); }&lt;/style&gt;
  &lt;svg:svg height="0"&gt;
    &lt;svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"&gt;
      &lt;svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"&gt;
        &lt;svg:stop stop-color="white" offset="0"/&gt;
        &lt;svg:stop stop-color="white" stop-opacity="0" offset="1"/&gt;
      &lt;/svg:linearGradient&gt;
      &lt;svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/&gt;
      &lt;svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/&gt;
    &lt;/svg:mask&gt;
  &lt;/svg:svg&gt;
</pre>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Tenga en cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en la línea</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">1</span><span title="Haz clic para obtener otras posibles traducciones">, la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifica</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mediante</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una dirección URL para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">#</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">M1</span><span title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que es</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el identificador</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifican a continuación</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Todo lo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">demás</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifican otros detalles</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sobre</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">misma</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de degradado</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En realidad,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de aplicar el efecto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">XHTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se hace</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">simplemente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">asignar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de destino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">definido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">anteriormente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el elemento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">así</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p>
<pre class="brush: xml">&lt;iframe class="target" src="http://mozilla.org"/&gt;</pre>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En este ejemplo se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incrusta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">iframe</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que contiene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sitio</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">web de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Mozilla.org</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">representa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se le aplica</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
<p><a class="internal" href="/@api/deki/files/3213/=maskdemo.xhtml" title="/@api/deki/files/3213/=maskdemo.xhtml">View this example live</a>.</p><h3 id="Ejemplo_Recorte"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Recorte</span></span></h3>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para recortar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Cuando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nos fijamos en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la demostración</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en vivo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incluso en las zonas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">calientes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los enlaces</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">recortan</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
<pre class="brush: xml">  &lt;style&gt;.target { clip-path: url(#c1); }&lt;/style&gt;
  &lt;svg:svg height="0"&gt;
    &lt;svg:clipPath id="c1" clipPathUnits="objectBoundingBox"&gt;
      &lt;svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/&gt;
      &lt;svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/&gt;
    &lt;/svg:clipPath&gt;
  &lt;/svg:svg&gt;
</pre>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">área de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">recorte</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">compuesto por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">círculo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">rectángulo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y le asigna</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">#</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">c1</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">entonces se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hace referencia</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Una vez que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de destino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera</span><span title="Haz clic para obtener otras posibles traducciones">, la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">asignar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a cualquier</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elemento</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Tenga en cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">también</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">realizar cambios en el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en tiempo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">real</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambios</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">afectan inmediatamente a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la prestación</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambiar el tamaño del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">círculo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">camino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establecido:</span></span></p>
<pre class="brush: xml">    var circle = document.getElementById("circle");
    circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
</pre>
<p><a class="internal" href="/@api/deki/files/3214/=clipdemo.xhtml" title="/@api/deki/files/3214/=clipdemo.xhtml">View this example live</a>.  <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incluye</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">botón</span>, <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hacer clic</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambiar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver que el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambio surta efecto.</span></span></p><h3 id="Ejemplo_Filtrar"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Filtrar</span></span></h3>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtro</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">varios filtros</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se aplican</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cada uno</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tres</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elementos</span><span title="Haz clic para obtener otras posibles traducciones">, tanto en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los Estados</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">suspender</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">normal y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el ratón</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
<br>
<span class="hps" title="Haz clic para obtener otras posibles traducciones">Cualquier</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtro se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Por ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efecto de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desenfoque gaussiano</span><span title="Haz clic para obtener otras posibles traducciones">, puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizar</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p>
<pre class="brush: xml">&lt;svg:filter id="f1"&gt;
  &lt;svg:feGaussianBlur stdDeviation="3"/&gt;
&lt;/svg:filter&gt;
</pre>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">También puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">matriz de color</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera:</span></span></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><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Estos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">son</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sólo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">dos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los cinco</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtros de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Asegúrese</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">echar un vistazo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">al</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">completo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">si</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">le gustaría</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">más</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br>
<br>
<span class="hps" title="Haz clic para obtener otras posibles traducciones">Los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cinco</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtros se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplican</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mediante el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">siguiente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código CSS:</span></span></p>
<pre class="brush: xml">  &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="internal" href="/@api/deki/files/3217/=filterdemo.xhtml" title="/@api/deki/files/3217/=filterdemo.xhtml">View this example live</a>.</p><h2 id="Uso_de_referencias_externas"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Uso de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">referencias</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externas</span></span></h2>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elementos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utiliza</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para cortar</span><span title="Haz clic para obtener otras posibles traducciones">, el enmascaramiento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y así sucesivamente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se pueden cargar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desde</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mientras</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">proviene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo origen</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML al que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplica.</span><br>
<br>
<span class="hps" title="Haz clic para obtener otras posibles traducciones">Por ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">si</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tu</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un archivo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">llamado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">default.css</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tener el siguiente aspecto</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p>
<pre class="brush: xml">.target { clip-path: url(resources.svg#c1); }</pre>
<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se importa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desde</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">archivo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">llamado</span></span> <code>resources.svg</code>, <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span></span> <code>c1</code>.</p><h2 id="Véa_también"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Véa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">también</span></span></h2>
<ul> <li><a class="internal" href="/en/SVG" title="En/SVG">SVG</a></li> <li><a class="external" href="/web-tech/2008/09/15/svg-effects-for-html-content" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2008/09/15/svg-effects-for-html-content/">SVG Effects for HTML Content</a> (blog post)</li> <li><a class="external" href="/web-tech/2008/10/10/svg-external-document-references" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2008/10/10/svg-external-document-references/">SVG External Document References</a> (blog post)</li>
</ul>
<p> </p>
<p> </p>
<p style="margin-left: 680px;">                      CESAR ORTIZ GUTIERREZ - ELPATOX - wWw.Patito.Tk</p>