English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Manual de Referencia de SVG recopila los elementos comunes de SVG, así como los métodos de uso de los atributos de los elementos, y los parámetros de uso detallados, las descripciones y otros.
| elemento | descripción | atributo |
|---|---|---|
| <a> | crear un elemento SVG alrededor de un vínculo | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | permitir que el texto objetivo se controle para presentar datos de caracteres especiales | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | definir una serie de sustituciones de símbolos de significado | id |
| <altGlyphItem> | definir una serie de sustituciones de símbolos de significado candidatos | id |
| <animate> | cambio dinámico de atributo con el tiempo | attributeName="nombreDeAtributoObjetivo" from="Valor inicial" to="Valor final" dur="duracion" repeatCount="La animación ocurrirá durante el tiempo" |
| <animateColor> | Define la transición de color con el tiempo | by="Valor de desplazamiento relativo" from="Valor inicial" to="Valor final" |
| <animateMotion> | Hace que el elemento se mueva a lo largo de la ruta de acción | calcMode="Modo de interpolación de la animación. Puede ser &39;discrete',
'linear',39;paced',39;spline'" path="Ruta de movimiento" keyPoints="Cuánto debe moverse el objeto en el tiempo actual de la ruta de movimiento" rotate="Aplicar transformación de rotación" xlink:href="URI que referencia el elemento <path> que define la ruta de movimiento" |
| <animateTransform> | Transforma la propiedad de transformación del elemento objetivo de la animación, controlando así el desplazamiento, escalado, rotación o inclinación de la animación | by="Valor de desplazamiento relativo" from="Valor inicial" to="Valor final" type="Transformación de tipo que cambia con el tiempo. Puede ser &39;translate',39;scale',39;rotate',39;skewX',39;skewY'" |
| <circle> | Define un círculo | cx="Coordenada x del círculo" cy="Coordenada y del círculo" r="Radio del círculo". Obligatorio. + propiedades visibles: color, FillStroke, gráfico |
| <clipPath> | Usado para ocultar la parte del objeto que está fuera de la ruta de recorte. El molde que define qué y qué no se dibuja se llama ruta de recorte | clip-path="Referencia a la ruta de recorte y la intersección de las referencias a la ruta de recorte" clipPathUnits="userSpaceOnUse' o'objectBoundingBox"。El segundo valor childern del borde de un objeto, se utiliza una parte pequeña de la unidad de máscara (por defecto: "userSpaceOnUse"") |
| <color-profile> | Especifica la descripción del archivo de configuración de color (al usar archivos de estilo CSS) | local="ID único del archivo de configuración de color almacenado localmente" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="URI del recurso del perfil de color ICC" |
| <cursor> | Define un cursor personalizado independiente de la plataforma | x="Esquina superior izquierda del cursor en el eje x (por defecto 0)" y="Esquina superior izquierda del cursor en el eje y (por defecto 0)" xlink:href="URI de la imagen del cursor utilizado" |
| <defs> | Contenedor de elementos citados | |
| <desc> | descripción de texto pura de los elementos en SVG - no se muestra como parte gráfica. El agente de usuario lo mostrará como una herramienta de información | |
| <ellipse> | definir un ovalo | cx="coordenada x del ovalo" cy="coordenada y del ovalo" rx="radio del ovalo en el eje x". Obligatorio. ry="radio del ovalo largo en el eje y". Obligatorio. + propiedades visibles: color, FillStroke, gráfico |
| <feBlend> | combinar dos objetos utilizando diferentes modos de mezcla | mode="modo de mezcla de imagen: normal|multiply|screen|darken|lighten" in="identificado como la entrada original del filtro: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="operación de mezcla del segundo imagen de entrada" |
| feColorMatrix | filtro SVG. Aplica una transformación de matriz | |
| feComponentTransfer | filtro SVG. Ejecuta el componente de datos-remapado inteligente | |
| 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. Elemento hijo de feComponentTransfer | |
| feFuncB | filtro SVG. Elemento hijo de feComponentTransfer | |
| feFuncG | filtro SVG. Elemento hijo de feComponentTransfer | |
| feFuncR | filtro SVG. Elemento hijo de feComponentTransfer | |
| feGaussianBlur | filtro SVG. Ejecuta un desenfoque gaussiano en la imagen | |
| feImage | filtro SVG. | |
| feMerge | filtro SVG. Construido sobre capas de imágenes superpuestas | |
| feMergeNode | filtro SVG. Elemento hijo de feMerge | |
| feMorphology | filtro SVG. Ejecuta "engrosamiento" o "adelgazamiento" en la imagen de origen | |
| feOffset | filtro SVG. Mueve la imagen en relación a su posición actual | |
| fePointLight | filtro SVG | |
| feSpecularLighting | filtro SVG | |
| feSpotLight | filtro SVG | |
| feTile | filtro SVG | |
| feTurbulence | filtro SVG | |
| filter | contenedor de efectos de filtro | |
| font | definir la fuente | |
| font-face | describir las características de una fuente | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | elemento contenedor utilizado para combinar elementos relacionados | id="nombre del grupo" relleno="color de relleno del grupo" opacidad="opacidad del grupo" + Atributos visibles: Todos |
| glyph | definir el gráfico para el símbolo pictórico dado | |
| glyphRef | definir el símbolo pictórico posible a usar | |
| hkern | ||
| <image> | definir una imagen | x="coordenada x del extremo superior izquierdo de la imagen" y="coordenada y del extremo superior izquierdo de la imagen" width="ancho de la imagen". Es obligatorio. height="altura de la imagen". Es obligatorio. xlink:href="ruta de la imagen". Es obligatorio. + Atributos visibles: Color, Gráficos, Imágenes, Cuadros de visualización |
| <line> | definir una línea | x1="coordenada x del punto de partida de la línea" y1="coordenada y del punto de partida de la línea" x2="coordenada x del final de la línea" y2="coordenada y del final de la línea" + Atributos visibles: Color, Relleno, Graficos, Marcadores |
| <linearGradient> | definir un degradado lineal. Al usar un relleno de degradado vectorial lineal para el objeto, se puede definir como degradado horizontal, vertical o angular. | id="propiedad id que puede definir un nombre único para el degradado. La referencia debe gradientUnits="#39;userSpaceOnUse#39; o #39;objectBoundingBox#39;Se utiliza el cuadro de visualización o el objeto para determinar el vector de posición vectorial relativo. (por defecto de39;objectBoundingBox" gradientTransform="transformación aplicable al degradado" x1="punto de partida del vector de degradado en el eje x (por defecto 0％)" y1="punto de partida del vector de degradado y en el eje y (por defecto 0％)" x2="punto final del vector de degradado en el eje x. (por defecto100％)" y2="punto final del vector de degradado y en el eje y. (por defecto 0％)" spreadMethod="#39;pad#39; o #39;reflect#39; o #39;repeat#39;" xlink:href="referencia a otro degradado cuyos valores de atributo se utilizan como por defecto y puntos de parada incluidos. Recursivo" |
| <marker> | los marcadores pueden colocarse en los vértices de líneas rectas, líneas curvas, polígonos y rutas. Estos elementos pueden usar la propiedad "marker"-"start", "marker-"mid" y "marker-end", heredando el valor por defecto o pudiendo establecerlo en "none" o la URI del marcador definido. Debe definir primero el marcador antes de poder referenciarlo mediante su URI. Cualquier forma puede tener un marcador dentro. Al dibujar elementos, se los adjuntan a la parte superior | markerUnits="anchoDePincel39; o'userSpaceOnUse". Si es "anchoDePincel", se utiliza una unidad igual al ancho de una trazo. De lo contrario, la escala del marcador no utilizará la misma unidad de vista como elemento de referencia (por defecto39;anchoDePincel39;) refx="marcar la posición de conexión del vértice de marcador (por defecto 0)" refy="la posición de conexión del vértice del marcador (por defecto 0)" orient="'auto'mostrar siempre el ángulo del marcador. "auto" calculará un ángulo que haga que el valor tangente del vértice superior del eje X sea (por defecto 0) markerWidth="la anchura del marcador (por defecto3)" markerHeight="la altura del marcador (por defecto3)" ver la "región de dibujo SVG" de puntos. Separados por espacio o coma4Un valor. (min x, min y, width, height)" + atributos de presentación: Todos |
| <mask> | un filtro de máscara es una combinación de valores de opacidad y recorte. Al igual que el recorte, puedes usar gráficos, texto o rutas para definir la parte de la máscara. El estado predeterminado de una máscara es completamente transparente, es decir, al otro lado de la superficie de recorte. En la configuración gráfica de la máscara, define la parte opaca de la máscara | maskUnits="'userSpaceOnUse#39; o #39;objectBoundingBox#39;. Establece si la máscara es relativa a la ventana completa o al objeto (por defecto:'objectBoundingBox#39;) maskContentUnits="segunda máscara relativa a la posición gráfica del objeto (%)'userSpaceOnUse#39; o'objectBoundingBox#39;(por defecto:'userSpaceOnUse#39;) x="máscara de recorte (por defecto:-10％) y="máscara de recorte (por defecto:-10％) width="máscara de recorte (por defecto:120％)" height="máscara de recorte (por defecto:120％)" |
| metadata | especificar metadatos | |
| missing-glyph | ||
| mpath | ||
| <path> | definir una ruta | d="definir instrucciones de ruta" pathLength="si existe, la ruta se escalará para calcular la longitud de la ruta equivalente a este valor" transform="lista de transformaciones" + Atributos visibles: Color, Relleno, Graficos, Marcadores |
| <pattern> | Define las coordenadas, la vista que deseas mostrar y el tamaño de la vista. Luego añádela a la forma de patrón. La vista se repite cuando se alcanza el borde del cuadro de visualización (rango visible) | id="un ID único para referirse a este patrón. Obligatorio." patternUnits="userSpaceOnUse' o'objectBoundingBox". El segundo valor X, Y, width, height utiliza una pequeña parte del borde del objeto patrón, unidades (％)." patternContentUnits="'userSpaceOnUse#39; o 'objectBoundingBox#39;" patternTransform="permite que toda la expresión se transforme" x="el desplazamiento del patrón, desde la esquina superior izquierda (por defecto 0" y="el desplazamiento del patrón, desde la esquina superior izquierda (por defecto 0" width="la anchura de la repetición del patrón (por defecto100％)" height="la altura de la repetición del patrón (por defecto100％)" ver la "región de dibujo SVG" de puntos. Separados por espacio o coma4Un valor. (min x, min y, width, height)" xlink:href="Otro patrón, sus valores de atributo son valores por defecto y cualquier subclase puede heredarlos. Recursivo" |
| <polygon> | Definir un gráfico que contiene al menos tres lados | points="Puntos del polígono. El número total de puntos debe ser par". Obligatorio. fill-rule="Parte de las propiedades de demostración de Relleno y Bordes" + Atributos visibles: Color, Relleno, Graficos, Marcadores |
| <polyline> | Definir una forma compuesta solo por líneas rectas | points="Puntos en la línea recta". Obligatorio. + Atributos visibles: Color, Relleno, Graficos, Marcadores |
| <radialGradient> | Definir un gradiente radiactivo. El gradiente radiactivo crea un círculo | gradientUnits="#39;userSpaceOnUse#39; o #39;objectBoundingBox#39. Utilice el viewport o el objeto para determinar el punto vectorial de posición relativa. (por defecto de)39;objectBoundingBox" gradientTransform="Transformación aplicable al gradiente" cx="Punto central del gradiente (número o % - 50％ es el valor por defecto) cy="Punto central del gradiente. (por defecto50％)" r="Radio del gradiente. (por defecto50％)" fx="Punto de foco del gradiente. (por defecto 0％) fy="Punto de foco del gradiente. (por defecto 0％) spreadMethod="#39;pad#39; o #39;reflect#39; o #39;repeat#39;" xlink:href="Referencia a otro gradiente, sus valores de atributo como valores por defecto. Recursivo" |
| <rect> | Definir un rectángulo | x="Eje x de la esquina superior izquierda del rectángulo" y="Eje y de la esquina superior izquierda del rectángulo" rx="Radio del eje x (elemento redondeado" ry="Radio del eje y (elemento redondeado" width="Ancho del rectángulo". Obligatorio. height="Altura del rectángulo". Obligatorio. + Atributos visibles: Color, Relleno, Graficos |
| script | contenedor de scripts. (por ejemplo ECMAScript) | |
| set | Establecer un valor de atributo que especifica el tiempo | |
| <stop> | Parada de gradiente | offset="Desplazamiento del Stop (de 0 a1/0％ a100％). Referencia stop-color="El color de este stop" stop-opacity="La opacidad de este Stop (de 0 a1)" |
| style | Permite que las hojas de estilo se embeddings directamente en el contenido SVG | |
| <svg> | Crear un fragmento de documento SVG | x="Incrustación superior izquierda (por defecto 0" y="Incrustación superior izquierda (por defecto 0" width="Ancho del fragmento SVG (por defecto)100％)" height="La altura del fragmento SVG (por defecto de100％)" viewBox="Punto "seen" esta área de dibujo SVG. Separados por espacio o comas4Este valor. (min x, min y, anchura, altura)" preserveAspectRatio="#39;none#39; o cualquier #39;xVALYVAL#39;9Esta combinación, VAL es "min", "mid" o "max". (por defecto none) zoomAndPan="#39;magnify#39; o #39;disable#39;.Opción de Magnify permite al usuario desplazarse y escalar su archivo (por defecto Magnify )" xml="Todos los elementos <svg> más externos necesitan instalar SVG y su espacio de nombres: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + Atributos visibles: Todos |
| switch | ||
| symbol | ||
| <text> | Definir un texto | x="La posición X de la lista" -La posición del eje. En el texto, en la posición del n-esimo caracter en el n-esimo eje X. Si hay caracteres adicionales, se colocan en la posición después del último caracter. 0 es el valor por defecto" y="La posición en el eje Y de la lista. (Referencia x) 0 es el valor por defecto" dx="Mueve la posición absoluta relativa al último símbolo dibujado en la lista de longitudes del caracter. (Referencia x") dy="Mueve la posición absoluta relativa al último símbolo dibujado en la lista de longitudes del caracter. (Referencia x") rotate="Una lista de rotaciones. La rotación del n-esimo es el n-esimo caracter. Los caracteres adicionales no tienen un valor de rotación final" textLength="El visualizador de SVG intentará mostrar el espacio entre los textos"/o la longitud del objetivo de ajuste de caracteres. (por defecto: longitud del texto normal)" lengthAdjust="Avisa al visualizador que, si se especifica una longitud, intentará ajustarla para mostrar el texto. Estos valores son #39;spacing#39; y #39;spacingAndGlyphs#39;" + Atributos visibles: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | descripción de texto pura de los elementos en SVG - no se muestra como parte gráfica. El agente de usuario lo mostrará como una herramienta de información | |
| <tref> | cita cualquier elemento <text> de cualquier documento SVG y lo reutiliza | el elemento <TEXT> es el mismo |
| <tspan> | El elemento es equivalente al <text>, pero se pueden anidar etiquetas de texto internas y el texto mismo dentro | Identico al elemento <text> + Además: xlink:href="referencia a un elemento <TEXT>" |
| <use> | Utilice una referencia URI para un <G>, <svg> u otro elemento que tenga un atributo ID único y elementos gráficos repetidos. Se copia el elemento original, por lo que la existencia original en el archivo es solo una referencia. Cualquier cambio en el original afecta a todas las copias. | x="eje x del extremo superior izquierdo del elemento clonado" y="eje y del extremo superior izquierdo del elemento clonado" width="ancho del elemento clonado" height="altura del elemento clonado" xlink:href="referencia URI a elementos clonados" + Atributos visibles: Todos |
| view | ||
| vkern |