Aplicación de efectos de SVG para el contenido HTML

  • Enlace amigable (slug) de la revisión: Applying_SVG_effects_to_HTML_content
  • Título de la revisión: Aplicación de efectos de SVG para el contenido HTML
  • Id de la revisión: 86608
  • Creada:
  • Creador: elPatox
  • ¿Es la revisión actual? No
  • Comentario 1 words added

Contenido de la revisión

Aplicación de efectos de SVG para el contenido HTML.

{{ gecko_minversion_header("1.9.1") }}

Firefox 3.5 introduce soporte para usar SVG como un componente de estilos CSS para aplicar efectos de SVG para el contenido HTML.

Puede especificar SVG en los estilos, ya sea dentro del mismo documento, o dentro de una hoja de estilos externa.

Nota: Las referencias a SVG en archivos externos deben ser de el mismo origen que el documento de origen.

Uso integrado SVG

Para aplicar un efecto SVG usando estilos CSS, primero tiene que crear el estilo CSS que hace referencia al SVG para aplicar.

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

 

En el ejemplo anterior, el nuevo estilo, por "stylename," es una máscara de SVG que hace referencia a el identificador "localstyle". Una vez que se estableció, que la máscara se aplica a todos los elementos con este estilo CSS.

Esto suena más complicado de lo que realmente es, echar un vistazo a los ejemplos para tener una buena idea de cómo funciona esto.

Hay tres estilos que se pueden aplicar: puede usar la máscara, el recorrido de clip, o un filtro.

 

Ejemplo: Enmascaramiento (Máscara)

Por ejemplo, puede establecer un estilo CSS que proporciona una máscara de degradado para el contenido HTML con código SVG similar a lo siguiente en su documento HTML:

NOTA: El espaciamiento de nombre no es válida en HTML 5, dejar fuera de la "svg:" en las etiquetas de los documentos en formato HTML.

  <style>.target { mask: url(#m1); }</style>
  <svg:svg height="0">
    <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
        <svg:stop stop-color="white" offset="0"/>
        <svg:stop stop-color="white" stop-opacity="0" offset="1"/>
      </svg:linearGradient>
      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
      <svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
    </svg:mask>
  </svg:svg>

Tenga en cuenta que en la línea 1, la máscara se especifica mediante una dirección URL para el ID "# M1", que es el identificador de la máscara de SVG que se especifican a continuación. Todo lo demás se especifican otros detalles sobre la misma máscara de degradado.

En realidad, de aplicar el efecto SVG a XHTML o HTML se hace simplemente asignar el estilo de destino definido anteriormente para el elemento, así:

  <iframe class="target" src="http://mozilla.org"/>

En este ejemplo se incrusta un iframe que contiene el sitio web de Mozilla.org, que se representa con la máscara que se le aplica.

View this example live.

Ejemplo: Recorte

Este ejemplo muestra cómo utilizar SVG para recortar el contenido HTML. Cuando nos fijamos en la demostración en vivo, cuenta que incluso en las zonas calientes de los enlaces se recortan.

  <style>.target { clip-path: url(#c1); }</style>
  <svg:svg height="0">
    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
      <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
    </svg:clipPath>
  </svg:svg>

Esto establece un área de recorte compuesto por un círculo y el rectángulo, y le asigna el ID # c1 ". Esto entonces se hace referencia en el estilo. Una vez que el estilo de destino se establece de esta manera, la ruta del clip se puede asignar a cualquier elemento.

Tenga en cuenta también que puede realizar cambios en el SVG en tiempo real y ver los cambios afectan inmediatamente a la prestación del HTML. Por ejemplo, puede cambiar el tamaño del círculo en el camino clip establecido:

    var circle = document.getElementById("circle");
    circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;

View this example liveEl ejemplo incluye un botón, puede hacer clic para cambiar la ruta de clip y ver que el cambio surta efecto.

Ejemplo: Filtrar

Este ejemplo muestra cómo se puede aplicar un filtro para el contenido HTML utilizando SVG. Establece varios filtros que se aplican con estilos para cada uno de los tres elementos, tanto en los Estados suspender normal y el ratón.

Cualquier SVG filtro se puede aplicar de esta manera. Por ejemplo, para aplicar un efecto de desenfoque gaussiano, puede utilizar:

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

También puede aplicar una matriz de color, de esta manera:

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

Estos son sólo dos de los cinco filtros de muestra en este ejemplo. Asegúrese de echar un vistazo al código completo si le gustaría ver más.

Los cinco filtros se aplican mediante el siguiente código 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.

Uso de referencias externas

Los elementos SVG se utiliza para cortar, el enmascaramiento, y así sucesivamente se pueden cargar desde un documento externo, mientras que el documento proviene del mismo origen que el documento HTML al que se aplica.

Por ejemplo, si tu CSS en un archivo llamado default.css, puede tener el siguiente aspecto:

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

El SVG se importa desde un archivo llamado resources.svg, utilizando la ruta del clip con el ID c1.

Véa también

 

 

                      CESAR ORTIZ GUTIERREZ - ELPATOX - wWw.Patito.Tk

Fuente de la revisión

<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><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>
<p><code>1</code><code class="plain">&lt;</code><code class="keyword">style</code><code class="plain">&gt;.stylename { mask: url(#localstyle); }&lt;/</code><code class="keyword">style</code><code class="plain">&gt;</code></p>
<p> </p>
<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><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="script">  &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="script">  &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><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="script">  &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="script">    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><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="script">&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="script">    &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="script">  &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><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="script" id="line1">.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><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>
Revertir a esta revisión