From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/svg/attribute/index.html | 467 +++++++++++++++++++++++ files/es/web/svg/attribute/stop-color/index.html | 59 +++ files/es/web/svg/attribute/transform/index.html | 144 +++++++ 3 files changed, 670 insertions(+) create mode 100644 files/es/web/svg/attribute/index.html create mode 100644 files/es/web/svg/attribute/stop-color/index.html create mode 100644 files/es/web/svg/attribute/transform/index.html (limited to 'files/es/web/svg/attribute') diff --git a/files/es/web/svg/attribute/index.html b/files/es/web/svg/attribute/index.html new file mode 100644 index 0000000000..2c8897445b --- /dev/null +++ b/files/es/web/svg/attribute/index.html @@ -0,0 +1,467 @@ +--- +title: Referencia atributos SVG +slug: Web/SVG/Attribute +tags: + - Atributo SVG + - Dibujo + - Gráficos vectoriales + - SVG +translation_of: Web/SVG/Attribute +--- +
{{SVGRef}}
+ +

Los elementos SVG pueden ser modificados usando atributos, especificando cómo debe ser manejado o renderizado el elemento A continuación se muestra una lista de todos los atributos disponibles en SVG con sus respectivos enlaces a la documentación de referencia para ayudarte a comprender qué elementos los soportan y cómo funcionan

+ +

Atributos SVG de la A a la Z

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

I

+ + + +

K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P

+ + + +

R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

V

+ + + +

W

+ + + +

X

+ + + +

Y

+ + + +

Z

+ + +
+ +

Categorías

+ +

Atributos de eventos de animación

+ +

{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}

+ +

Atributos de objetivo de animación

+ +

{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}

+ +

Atributos temporales de animación

+ +

{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}

+ +

Atributos de valores de animación

+ +

{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}

+ +

Atributos de adición de animación

+ +

{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}

+ +

Atributos de procesado condicional

+ +

{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.

+ +

Atributos principales

+ +

{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}

+ +

Atributos de eventos del documento

+ +

{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}

+ +

Atributos de filtro de primitivas

+ +

{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}

+ +

Atributos de eventos gráficos

+ +

{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}

+ +

Atributos presentacionales

+ +
Nota: todos los atributos presentacionales de SVG pueden ser usados como propiedades CSS.
+ +

{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}

+ +

Atributos de estilo

+ +

{{ SVGAttr("class") }}, {{ SVGAttr("style") }}

+ +

Atributos de transferencia de funcionalidades

+ +

{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}

+ + + +

{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}

diff --git a/files/es/web/svg/attribute/stop-color/index.html b/files/es/web/svg/attribute/stop-color/index.html new file mode 100644 index 0000000000..54bfb8000b --- /dev/null +++ b/files/es/web/svg/attribute/stop-color/index.html @@ -0,0 +1,59 @@ +--- +title: stop-color +slug: Web/SVG/Attribute/stop-color +tags: + - Atributos SVG +translation_of: Web/SVG/Attribute/stop-color +--- +

« SVG Attribute reference home

+ +

El atributo stop-color indica que color usar en el stop del gradiente. La keyword currentColor y ICC  pueden ser especificadas de la misma manera con la especificación <paint> para los atributos {{ SVGAttr("fill") }} y {{ SVGAttr("stroke") }}.

+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + + + + + +
CategoríasPresentation attribute
ValorcurrentColor | <color> | <icccolor> | inherit
Valor inicialnegro
Animatable
Documento normativoSVG 1.1 (2.ª edición)
+ +

Ejemplos

+ +

Elementos

+ +

El siguiente elemento puede usar el atributo stop-color

+ + + +

Compatibilidad entre navegadores

+ + + +

{{Compat("svg.attributes.presentation.stop-color")}}

+ +

Ver también

+ + diff --git a/files/es/web/svg/attribute/transform/index.html b/files/es/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..0d225d06b8 --- /dev/null +++ b/files/es/web/svg/attribute/transform/index.html @@ -0,0 +1,144 @@ +--- +title: transform +slug: Web/SVG/Attribute/transform +translation_of: Web/SVG/Attribute/transform +--- +

« Indice de atributos SVG

+ +

El atributo transform exhibe una lista de definiciones de transformación que se aplican a un elemento y a sus hijos. Los elementos en la lista de tranformación están separados por espacios en blanco y/o comas y se aplican de derecha a izquierda.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
CategoriasNone
Valor<transform-list>
AnimableYes
Documento normativoSVG 1.1 (2nd Edition)
+ +

Tipos de definiciones de transformación

+ +
+
matrix(<a> <b> <c> <d> <e> <f>)
+
Esta definición de tranformación, especifica una transformación en forma de una matriz de transformación de seis valores. matrix(a,b,c,d,e,f) es equivalente a aplicar la siguiente matriz de transformación:(acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} que mapea las coordinadas desde un nuevo sistema de coordenadas a un sistema existente mediante la siguiente matriz de igualdades:(xprevCoordSysyprevCoordSys1)=(acebdf001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+cynewCoordSys+ebxnewCoordSys+dynewCoordSys+f1) \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \\ 1 \end{pmatrix}
+
translate(<x> [<y>])
+
Esta definición de transformación, especifica la transición en x e y. Es equivalente a: matrix(1 0 0 1 x y). Si no se provee ningun valor de  y , éste se asume como cero.
+
scale(<x> [<y>])
+
Esta definición de transformación, especifica la escala de operación en xy. Es equivalente a: matrix(x 0 0 y 0 0). Si no se provee ningun valor de  y , éste se asume igual a x.
+
rotate(<a> [<x> <y>])
+
Esta definición de transformación, especifica la rotación en a grados a partir del punto dado. Si los parámetros opcionales  x e y no se proveen, la rotación se produce en el origen del actual sistema de coordenadas del usuario. Esta operación se corresponde con la matriz:(cosa-sina0sinacosa0001)\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix} Si se proveen los parámetros opcionales x e y , la rotación se produce en el punto provisto (x, y). La operación representa el equivalente a la siguiente lista de transformaciones: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).
+
skewX(<a>)
+
This transform definition specifies a skew transformation along the x axis by a degrees. The operation corresponds to the matrix (1tan(a)0010001)\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
 
+
skewY(<a>)
+
This transform definition specifies a skew transformation along the y axis by a degrees. The operation corresponds to the matrix (100tan(a)10001) \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
+ +

Example

+ +

Rotating and Translating an SVG element

+ +

In this simple example we rotate and translate (move) an SVG element using transform SVG attribute. The original element before transform is shown with a low opacity.

+ +

CSS (optional):

+ +
text {
+  font: 1em sans-serif;
+}
+ +

SVG:

+ +
<svg width="180" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- This is the element before translation and rotation are applied -->
+  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>
+
+  <!-- Now we add a text element and apply rotate and translate to both -->
+  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
+  <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>
+
+</svg>
+
+ +

{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}

+ +

General Transformation

+ +

Here is a basic example to understand a general transformation. We consider the transform matrix(1,2,3,4,5,6) and draw a thick blue line from (10,20) to (30,40) in the new coordinate system. A thin white line with the same end points is drawn above it using the original coordinate system.

+ +
<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">
+
+  <g transform="matrix(1,2,3,4,5,6)">
+    <!-- New coordinate system (thick blue line)
+         x1 = 10 | x2 = 30
+         y1 = 20 | y2 = 40
+      -->
+    <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/>
+  </g>
+
+  <!-- Previous coordinate system (thin white line)
+       x1 = 1 * 10 + 3 * 20 + 5 = 75  | x2 = 1 * 30 + 3 * 40 + 5 = 155
+       y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
+    -->
+  <line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/>
+
+</svg>
+
+ +

{{ EmbedLiveSample('General_Transformation','200px','250px') }}

+ +

Illustration of Text at the Same Position Rotated Around Different Points

+ +

All text examples in the SVG below have the same positioning on the page (x="200" y="0"), and all are rotated at 45°. The only difference is the point that anchors the rotation.

+ +
<svg viewBox="-20 -20 820 420" xmlns="http://www.w3.org/2000/svg" width="800" height="400">
+
+  <text x="200" y="0">...unrotated text; same starting position as examples below (in all cases: x="200" y="0")</text>
+
+  <circle cx="200" cy="0" r="2" style="stroke: green; stroke-width: 1; fill: green;" />
+  <text x="200" y="0" transform="rotate(45 200,0)" style="fill: green;" >...(1) rotate(45 200,0) (rotated 45° around a point at 200,0)</text>
+
+  <circle cx="100" cy="0" r="2" style="stroke: blue; stroke-width: 1; fill: blue;" />
+  <path d="M 200,0 A 100,100 0 0,1 0,0" style="stroke: blue; stroke-width: 1; fill: transparent;" />
+  <text x="200" y="0" transform="rotate(45 100,0)" style="fill: blue;">...(2) rotate(45 100,0) (rotated 45° around a point at 100,0)</text>
+
+  <circle cx="0" cy="0" r="2" style="stroke: red; stroke-width: 1; fill: red;" />
+  <path d="M 200,0 A 200,200 0 0,1 0,200" style="stroke: red; stroke-width: 1; fill: transparent;" />
+  <text x="200" y="0" transform="rotate(45 0,0)" style="fill: red;" >...(3) rotate(45 0,0) (rotated 45° around a point at 0,0)</text>
+
+</svg>
+
+ +

{{EmbedLiveSample("Illustration_of_Text_at_the_Same_Position_Rotated_Around_Different_Points", 800, 400)}}

+ +

Elements

+ +

The following elements can use the transform attribute:

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