From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../index.html | 102 +++ files/es/web/svg/element/glifo/index.html | 114 --- files/es/web/svg/element/glyph/index.html | 114 +++ files/es/web/svg/element/script/index.html | 255 +++++++ .../web/svg/svg_1.1_support_in_firefox/index.html | 847 +++++++++++++++++++++ files/es/web/svg/svg_en_firefox_1.5/index.html | 60 -- .../svg/tutorial/introducci\303\263n/index.html" | 45 -- files/es/web/svg/tutorial/introduction/index.html | 45 ++ 8 files changed, 1363 insertions(+), 219 deletions(-) create mode 100644 files/es/web/svg/applying_svg_effects_to_html_content/index.html delete mode 100644 files/es/web/svg/element/glifo/index.html create mode 100644 files/es/web/svg/element/glyph/index.html create mode 100644 files/es/web/svg/element/script/index.html create mode 100644 files/es/web/svg/svg_1.1_support_in_firefox/index.html delete mode 100644 files/es/web/svg/svg_en_firefox_1.5/index.html delete mode 100644 "files/es/web/svg/tutorial/introducci\303\263n/index.html" create mode 100644 files/es/web/svg/tutorial/introduction/index.html (limited to 'files/es/web/svg') diff --git a/files/es/web/svg/applying_svg_effects_to_html_content/index.html b/files/es/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..b5c8f17b51 --- /dev/null +++ b/files/es/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,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 +--- +

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.

+
<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 live.  El 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

diff --git a/files/es/web/svg/element/glifo/index.html b/files/es/web/svg/element/glifo/index.html deleted file mode 100644 index 78f97fe3bb..0000000000 --- a/files/es/web/svg/element/glifo/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: glyph -slug: Web/SVG/Element/glifo -tags: - - Contenido de texto SVG - - Elemento - - Fuentes SVG - - Glifos - - NeedsCompatTable - - Referencia - - SVG -translation_of: Web/SVG/Element/glyph ---- -
{{SVGRef}}
- -

Un glifo define a un glifo en particular en una fuente SVG.

- -

Contexto de uso

- - - - - - - - - - - - - - - - -
CategoriesElemento de contenido de texto.
Permitted content -

Cualquier número de los siguientes elementos, en cualquier orden:
- elementos de animación »
- elementos descriptivos »
- elementos de forma »
- elementos estructurales »
- elementos de gradiente »
- {{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}

-
Normative documentSVG 1.1 (Segunda edición)
- -

Ejemplo

- -
<?xml version="1.0" standalone="yes"?>
-<svg width="400px" height="300px" version="1.1"
-  xmlns = 'http://www.w3.org/2000/svg'>
-<!-- Example copied from http://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
-  <defs>
-
-    <font id="Font1" horiz-adv-x="1000">
-      <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
-          units-per-em="1000" cap-height="600" x-height="400"
-          ascent="700" descent="300"
-          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
-        <font-face-src>
-          <font-face-name name="Super Sans Bold"/>
-        </font-face-src>
-      </font-face>
-
-      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
-      <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
-      <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>
-
-    </font>
-  </defs>
-  <text x="100" y="100"
-           style="font-family: 'Super Sans', Helvetica, sans-serif;
-                  font-weight: bold; font-style: normal">Text
-    using embe@dded font!</text>
-</svg>
-
-
-
- -

Atributos

- -

Atributos globales

- - - -

Atributos específicos

- - - -

Interfaz DOM

- -

Este elemento implementa la interfaz SVGGlyphElement.

- -

Relacionado

- - diff --git a/files/es/web/svg/element/glyph/index.html b/files/es/web/svg/element/glyph/index.html new file mode 100644 index 0000000000..78f97fe3bb --- /dev/null +++ b/files/es/web/svg/element/glyph/index.html @@ -0,0 +1,114 @@ +--- +title: glyph +slug: Web/SVG/Element/glifo +tags: + - Contenido de texto SVG + - Elemento + - Fuentes SVG + - Glifos + - NeedsCompatTable + - Referencia + - SVG +translation_of: Web/SVG/Element/glyph +--- +
{{SVGRef}}
+ +

Un glifo define a un glifo en particular en una fuente SVG.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + +
CategoriesElemento de contenido de texto.
Permitted content +

Cualquier número de los siguientes elementos, en cualquier orden:
+ elementos de animación »
+ elementos descriptivos »
+ elementos de forma »
+ elementos estructurales »
+ elementos de gradiente »
+ {{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}

+
Normative documentSVG 1.1 (Segunda edición)
+ +

Ejemplo

+ +
<?xml version="1.0" standalone="yes"?>
+<svg width="400px" height="300px" version="1.1"
+  xmlns = 'http://www.w3.org/2000/svg'>
+<!-- Example copied from http://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
+  <defs>
+
+    <font id="Font1" horiz-adv-x="1000">
+      <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+          units-per-em="1000" cap-height="600" x-height="400"
+          ascent="700" descent="300"
+          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+        <font-face-src>
+          <font-face-name name="Super Sans Bold"/>
+        </font-face-src>
+      </font-face>
+
+      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+      <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
+      <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>
+
+    </font>
+  </defs>
+  <text x="100" y="100"
+           style="font-family: 'Super Sans', Helvetica, sans-serif;
+                  font-weight: bold; font-style: normal">Text
+    using embe@dded font!</text>
+</svg>
+
+
+
+ +

Atributos

+ +

Atributos globales

+ + + +

Atributos específicos

+ + + +

Interfaz DOM

+ +

Este elemento implementa la interfaz SVGGlyphElement.

+ +

Relacionado

+ + diff --git a/files/es/web/svg/element/script/index.html b/files/es/web/svg/element/script/index.html new file mode 100644 index 0000000000..d1b744f192 --- /dev/null +++ b/files/es/web/svg/element/script/index.html @@ -0,0 +1,255 @@ +--- +title: