Elementos SVG
| Elemento | Descripción | atributos |
|---|---|---|
| <a> | Crea un enlace en torno a elementos SVG | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | Proporciona control sobre los glifos usados para rendir particular, los datos de carácter | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | Define un conjunto de sustitución de glifos | id |
| <altGlyphItem> | Define un conjunto de candidatos de sustituciones de glifos | id |
| <animate> | Define cómo un atributo de un elemento cambia con el tiempo | attributeName="the name of the target attribute" by="a relative offset value" from="the starting value" to="the ending value" dur="the duration" repeatCount="the number of time the animation will take place" |
| <animateMotion> | Provoca un elemento de referencia para moverse a lo largo de una trayectoria de movimiento | calcMode="the interpolation mode for the animation. Can be 'discrete',
'linear', 'paced', 'spline'" path="the motion path" keyPoints="how far along the motion path the object shall move at the moment in time" rotate="applies a rotation transformation" xlink:href="an URI reference to the <path> element which defines the motion path" |
| <animateTransform> | Anima un atributo transformación en un elemento de destino, lo que permite animaciones para control de la traducción, escala, rotación y / o sesgar | by="a relative offset value" from="the starting value" to="the ending value" type="the type of transformation which is to have its values change over time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | Define un círculo | cx="the x-axis center of the circle" cy="the y-axis center of the circle" r="The circle's radius". Required. + presentation attributes: Color, FillStroke, Graphics |
| <clipPath> | Recorte es acerca de cómo ocultar lo que normalmente se dibuja. La plantilla que define lo que es y lo que no está dibujado se llama un camino de recortes | clip-path="the referenced clipping path is intersected with the
referencing clipping path" clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of children a fraction of the object bounding box which uses the mask (default: 'userSpaceOnUse') " |
| <color-profile> | Especifica una descripción del perfil de color (cuando el documento es de estilo usando CSS) | local="the unique ID for a locally stored color profile" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="the URI of an ICC profile resource" |
| <cursor> | Define un cursor personalizado independiente de la plataforma | x="the x-axis top-left corner of the cursor (default is 0) " y="the y-axis top-left corner of the cursor (default is 0) " xlink:href="the URI of the image to use as the cursor |
| <defs> | Un contenedor para elementos referenciados | |
| <desc> | Una descripción de sólo texto para elementos contenedores o elementos gráficos en SVG (agentes de usuario pueden mostrar el texto en forma de consejo) | |
| <ellipse> | Define una elipse | cx="the x-axis center of the ellipse" cy="the y-axis center of the ellipse" rx="the length of the ellipse's radius along the x-axis". Required. ry="the length of the ellipse's radius along the y-axis". Required. + presentation attributes: Color, FillStroke, Graphics |
| <feBlend> | Compone dos objetos entre sí de acuerdo con un determinado modo de fusión | mode="the image blending modes: normal|multiply|screen|darken|lighten" in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="the second input image to the blending operation" |
| feColorMatrix | filtro SVG. Se aplica una transformación de matriz | |
| feComponentTransfer | filtro SVG. Realiza reasignación componente racional de los datos | |
| feComposite | filtro SVG. | |
| feConvolveMatrix | filtro SVG. | |
| feDiffuseLighting | filtro SVG. | |
| feDisplacementMap | filtro SVG. | |
| feDistantLight | filtro SVG. Define una fuente de luz | |
| feFlood | filtro SVG. | |
| feFuncA | filtro SVG. Sub-elemento de feComponentTransfer | |
| feFuncB | filtro SVG. Sub-elemento de feComponentTransfer | |
| feFuncG | filtro SVG. Sub-elemento de feComponentTransfer | |
| feFuncR | filtro SVG. Sub-elemento de feComponentTransfer | |
| feGaussianBlur | filtro SVG. Realiza un desenfoque gaussiano en la imagen | |
| feImage | filtro SVG. | |
| feMerge | filtro SVG. Crea capas de imagen en la parte superior de la otra | |
| feMergeNode | filtro SVG. Sub-elemento de feMerge | |
| feMorphology | filtro SVG. Realiza una "fattening" o "thinning" en un gráfico fuente | |
| feOffset | filtro SVG. Mueve la imagen con respecto a su posición actual | |
| fePointLight | filtro SVG. | |
| feSpecularLighting | filtro SVG. | |
| feSpotLight | filtro SVG. | |
| feTile | filtro SVG. | |
| feTurbulence | filtro SVG. | |
| filter | Contenedor para efectos de filtro | |
| font | Define un tipo de letra | |
| font-face | Describe las características de un tipo de letra | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | Se utiliza para agrupar elementos | id="the name of the group" fill="the fill color for the group" opacity="the opacity for the group" + presentation attributes: All |
| glyph | Define los gráficos para un glifo dada | |
| glyphRef | Define una posible glifo de usar | |
| hkern | ||
| <image> | Define una imagen | x="the x-axis top-left corner of the image" y="the y-axis top-left corner of the image" width="the width of the image". Required. height="the height of the image". Required. xlink:href="the path to the image". Required. + presentation attributes: Color, Graphics, Images, Viewports |
| <line> | Define una línea | x1="the x start point of the line" y1="the y start point of the line" x2="the x end point of the line" y2="the y end point of the line" + presentation attributes: Color, FillStroke, Graphics, Markers |
| <linearGradient> | Define un gradiente lineal. gradientes lineales rellenar el objeto mediante el uso de un vector, y se pueden definir como gradientes horizontales, verticales o angulares. | id="the unique id used to reference this pattern. Required to reference
it" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox') " gradientTransform="the transformation to apply to the gradient" x1="the x start point of the gradient vector (number or % - 0% is default) " y1="the y start point of the gradient vector. (0% default) " x2="the x end point of the gradient vector. (100% default) " y2="the y end point of the gradient vector. (0% default) " spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive" |
| <marker> | Los marcadores pueden ser colocados en los vértices de líneas, polilíneas, polígonos y caminos. Estos elementos pueden utilizar el marker atributos "marker-start" , "marker-mid" y "marcador de fin" ", que hereda de forma predeterminada o puede ser ajustado en" ninguno "o el URI de un marcador definido. Primero debe definir el marcador antes de que pueda hacer referencia a ella a través de su URI. Cualquier tipo de forma puede poner dentro marcador. Se dibujan en la parte superior del elemento al que están unidos | markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used
then one unit equals one stroke width. Otherwise, the marker does not scale
and uses the the same view units as the referencing element (default 'strokeWidth') " refx="the position where the marker connects with the vertex (default 0) " refy="the position where the marker connects with the vertex (default 0) " orient="'auto' or an angle to always show the marker at. 'auto' will compute an angle that makes the x-axis a tangent of the vertex (default 0) " markerWidth="the width of the marker (default 3) " markerHeight="the height of the marker (default 3) " viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) " + presentation attributes: All |
| <mask> | El enmascaramiento es una combinación de valores de opacidad y de recorte. Al igual que el recorte puede utilizar formas, texto o caminos para definir secciones de la máscara. El estado por defecto de una máscara es totalmente transparente, que es lo contrario de plano delimitador. Los gráficos en una máscara característica determina partes opacas de la máscara son | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Set whether the
clipping plane is relative the full view port or object (default: 'objectBoundingBox') " maskContentUnits="Use the second with percentages to make mask graphic positions relative the object. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse') " x="the clipping plane of the mask (default: -10%) " y="the clipping plane of the mask (default: -10%) " width="the clipping plane of the mask (default: 120%) " height="the clipping plane of the mask (default: 120%) " |
| metadata | Especifica metadatos | |
| missing-glyph | ||
| mpath | ||
| <path> | Define una trayectoria | d="a set of commands which define the path" pathLength="If present, the path will be scaled so that the computed path length of the points equals this value" transform="a list of transformations" + presentation attributes: Color, FillStroke, Graphics, Markers |
| <pattern> | Define las coordenadas que desee para mostrar la vista y el tamaño de la vista. A continuación, agregar formas a su patrón. El patrón se repite cuando un borde de la opinión de la caja (viewing area) es golpeado | id="the unique id used to reference this pattern." Required. patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, width, height a fraction (or %) of the object bounding box which uses the pattern." patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" patternTransform="allows the whole pattern to be transformed" x="pattern's offset from the top-left corner (default 0) " y="pattern's offset from the top-left corner. (default 0) " width="the width of the pattern tile (default 100%) " height="the height of the pattern tile (default 100%) " viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) " xlink:href="reference to another pattern whose attribute values are used as defaults and any children are inherited. Recursive" |
| <polygon> | Define un gráfico que contiene al menos tres lados | points="the points of the polygon. The total number of points must be
even". Required. fill-rule="part of the FillStroke presentation attributes" + presentation attributes: Color, FillStroke, Graphics, Markers |
| <polyline> | Define cualquier forma que se compone de sólo líneas rectas | points="the points on the polyline". Required. + presentation attributes: Color, FillStroke, Graphics, Markers |
| <radialGradient> | Define un gradiente radial. gradientes radiales se crean mediante la adopción de un círculo y sin problemas el cambio de valores entre las paradas de gradiente desde el punto de enfoque para el radio exterior. | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box
or object to determine relative position of vector points. (Default 'objectBoundingBox') " gradientTransform="the transformation to apply to the gradient" cx="the center point of the gradient (number or % - 50% is default) " cy="the center point of the gradient. (50% default) " r="the radius of the gradient. (50% default) " fx="the focus point of the gradient. (0% default) " fy="The focus point of the gradient. (0% default) " spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="Reference to another gradient whose attribute values are used as defaults and stops included. Recursive" |
| <rect> | Define un rectángulo | x="the x-axis top-left corner of the rectangle" y="the y-axis top-left corner of the rectangle" rx="the x-axis radius (to round the element) " ry="the y-axis radius (to round the element) " width="the width of the rectangle". Required. height="the height of the rectangle" Required. + presentation attributes: Color, FillStroke, Graphics |
| script | Contenedor para secuencias de comandos (eg, ECMAScript) | |
| set | Establece el valor de un atributo para una duración especificada | |
| <stop> | Las paradas para un gradiente | offset="the offset for this stop (0 to 1/0% to 100%) ". Required. stop-color="the color of this stop" stop-opacity="the opacity of this stop (0 to 1) " |
| style | Permite que las hojas de estilo que se incrustan directamente dentro del contenido SVG | |
| <svg> | Crea un fragmento de documento SVG | x="top left corner when embedded (default 0) " y="top left corner when embedded (default 0) " width="the width of the svg fragment (default 100%) " height="the height of the svg fragment (default 100%) " viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) " preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid) " zoomAndPan="'magnify' or 'disable'. Magnify option allows users to pan and zoom your file (default magnify) " xml="outermost <svg> element needs to setup SVG and its namespace: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + presentation attributes: All |
| switch | ||
| symbol | ||
| <text> | Define un texto | x="a list of x-axis positions. The nth x-axis position is given to the
nth character in the text. If there are additional characters after the
positions run out they are placed after the last character. 0 is default" y="a list of y-axis positions. (see x) . 0 is default" dx="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) " dy="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) " rotate="a list of rotations. The nth rotation is performed on the nth character. Additional characters are NOT given the last rotation value" textLength="a target length for the text that the SVG viewer will attempt to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length) " lengthAdjust="tells the viewer what to adjust to try to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'" + presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | Una descripción de sólo texto para los elementos de SVG - no se muestra como parte de los gráficos. Los agentes de usuario pueden mostrar el texto como una información sobre herramientas | |
| <tref> | Referencias cualquier <text> elemento en el documento SVG y reutilizarla | Identical to the <text> element |
| <tspan> | Idéntica a la <text> elemento, pero se pueden anidar dentro de las etiquetas de texto y dentro de la propia | Identical to the <text> element + in addition: xlink:href="Reference to a <text> element" |
| <use> | Utiliza un URI para hacer referencia a un <g>, <svg> elemento gráfico o de otro tipo con un atributo id único y replicarlo. La copia es sólo una referencia al original por lo que sólo se encuentra el original del documento. Cualquier cambio en el original afecta a todas las copias. | x="the x-axis top-left corner of the cloned element" y="the y-axis top-left corner of the cloned element" width="the width of the cloned element" height="the height of the cloned element" xlink:href="a URI reference to the cloned element" + presentation attributes: All |
| view | ||
| vkern |