Latest web development tutorials

Manual de referencia de SVG

elemento SVG

elemento explicación propiedad
<a> Crear un enlace alrededor del elemento SVG XLink: mostrar
XLink: accionar
xlink: href
objetivo
<AltGlyph> Permite que un objeto del texto controla lograr que los datos de carácter especial x
y
dx
dy
rotar
glyphRef
formato
xlink: href
<AltGlyphDef> Se define como una serie de símbolos para reemplazar identificación
<AltGlyphItem> Vuelva a colocar la definición de una serie de símbolos como el candidato identificación
<Animar> Cambio dinámico de propiedades a través del tiempo attributeName = "Nombre del atributo de destino"
from = "valor inicial"
a = "valor final"
dur = "Duración"
"Ocurrirá animación del tiempo." RepeatCount =
<AnimateColor> Con el tiempo, la definición de la conversión de colores por = "Valor de desplazamiento relativo"
from = "valor inicial"
a = "valor final"
<AnimateMotion> Para que el elemento se mueve a lo largo de la trayectoria de movimiento = CalcMode "modo de animación de interpolación puede ser 'discreta', 'lineal' 'ritmo', 'spline',"
path = "trayectoria de movimiento"
puntos clave = "a lo largo de la trayectoria de movimiento del objeto de la actualidad deben moverse lejos".
gire = "aplicar una transformación de rotación."
xlink: href = "URI hace referencia a un elemento <ruta> que define el trazado de movimiento."
<AnimateTransform> Animación elemento de destino transformar una propiedad, por lo que el plato de control de animación, zoom, rotación o inclinación por = "Valor de desplazamiento relativo"
from = "valor inicial"
a = "valor final"
type = "tipo convertida cuyo valor cambia con el tiempo puede ser" traducir "," escala "," Girar "," skewX ',' skewY ' "
<Círculo> La definición de un círculo cx = "eje x de coordenadas del círculo."
cy = "y coordenada del eje del círculo."
r = "radio del círculo." requerida.

+ Mostrar atributos: color, gráficos, FillStroke
<ClipPath> Se utiliza para ocultar los objetos situados fuera de la parte de trazado de recorte. Dibujo y lo que no define lo que se llama el camino de recortes matriz de dibujo clip-path = "referencias y referencias trazados de recorte cruzan el camino de recortes."
clipPathUnits = "userSpaceOnUse 'o' objectBoundingBox". El segundo valor de frontera están exentos de un objeto, utilizando una pequeña porción de la unidad de máscara (por defecto: "userSpaceOnUse") "
<Color de perfil> Descripción especificada perfil de color (cuando se utiliza el archivo de estilo CSS) locales = "perfil de color almacena localmente ID único"
name = ""
prestación de intención = "auto | perceptual | relativo colorimétrico | saturación | absoluta-colorimétrico"
xlink: href = "recurso perfil ICC URI"
<Cursor> Definir un cursor personalizado independiente de la plataforma x = "eje x esquina superior izquierda del cursor (el valor por defecto es 0)."
y = "eje Y de la esquina superior izquierda del cursor (el valor por defecto es 0)."
xlink: href = "Utilice la imagen del cursor URI
<Def> Contenedor de referencia del elemento
<Descripción> elementos puros en la descripción de texto SVG - no como parte de la gráfica para mostrar. Los agentes de usuario pueden presentar en forma de consejo
<Elipse> La definición de una elipse cx = "x-eje de coordenadas ovales"
cy = "eje y ovalada de coordenadas"
rx = "a lo largo del eje x de la radio de elipse." Requerido.
ry = "oblonga lo largo del radio del eje y." Requerido.

+ Mostrar atributos: color, gráficos, FillStroke
<FeBlend> El uso de diferentes modos de fusión a la síntesis de dos objetos mode = "modos de fusión de imágenes: la normalidad | multiplicar | pantalla | oscurecer | aligerar"
en = "identificado como la entrada bruta filtro dado: SourceGraphic | SourceAlpha | BackgroundImage | backgroundAlpha | FillPaint | StrokePaint | <filter-primitivo-referencia>"
in2 = "segunda operación de imagen de entrada de mezcla."
feColorMatrix filtro SVG. transformación de matriz adecuada
feComponentTransfer filtro SVG. En cuanto al componente de datos de reasignación de ejecución
feComposite Filtros SVG
feConvolveMatrix Filtros SVG
feDiffuseLighting Filtros SVG
feDisplacementMap Filtros SVG
feDistantLight filtro SVG. La definición de una fuente de luz
feFlood Filtros SVG
feFuncA filtro SVG. elementos secundarios feComponentTransfer
feFuncB filtro SVG. elementos secundarios feComponentTransfer
feFuncG filtro SVG. elementos secundarios feComponentTransfer
feFuncR filtro SVG. elementos secundarios feComponentTransfer
feGaussianBlur filtro SVG. imagen de desenfoque gaussiano Ejecutivo
feImage filtro SVG.
feMerge filtro SVG. Construida sobre una encima de otra capa de la imagen
feMergeNode filtro SVG. elementos secundarios feMerge
feMorphology filtro SVG. La aplicación de "engorde" o "adelgazamiento" los gráficos de origen
feOffset filtro SVG. En relación con su posición actual de una imagen en movimiento
fePointLight Filtros SVG
feSpecularLighting Filtros SVG
feSpotLight Filtros SVG
feTile Filtros SVG
feTurbulence Filtros SVG
filtro efectos de filtro de contenedores
fuente Fuentes personalizadas
font-face Describir las características de un tipo de letra
font-face-formato
font-face-nombre
font-face-src
font-face-uri
foreignObject
<G> elemento contenedor para la combinación de elementos relacionados id = "nombre del grupo."
llenar = "color de relleno del grupo."
opacidad = "La opacidad del grupo"

+ Mostrar propiedades:
todos
glifo Para un determinado jeroglífico gráficos personalizados
glyphRef definición pictograma puede ser utilizado
hkern
<Imagen> imagen personalizada x = "eje x de coordenadas de la esquina superior izquierda de la imagen."
"Coordenada del eje y de la esquina superior izquierda de la imagen." Y =
width = "ancho de la imagen." mosto.
height = "altura de la imagen." mosto.
XLink :. href = "ruta de la imagen" mosto.

+ Mostrar propiedades:
Color, gráficos, imágenes, ventanas gráficas
<Línea> Definir una línea x1 = "coordenada x del punto de partida de una línea recta."
y1 = "Y coordenadas del punto de partida de una línea recta."
x2 = "coordenada x del punto final de la recta."
y2 = "coordenada y del punto final de la recta."

+ Mostrar propiedades:
Color, FillStroke, las imágenes, marcas
<LinearGradient> Definir un gradiente lineal. Mediante el uso de un gradiente lineal llenar objetos de vector, y se puede definir como gradiente horizontal, vertical o ángulo. id = "atributo id puede definir un nombre único para el gradiente. referencias debe"
gradientUnits = " 'userSpaceOnUse' o 'objectBoundingBox'. Utilice el cuadro de vista u objeto de determinar el punto vector de posición relativa. (por defecto 'objectBoundingBox)"
gradientTransform = "se aplica a cambiar el gradiente"
x1 = "x vector gradiente punto de partida (por defecto 0%)"
y1 = "y el punto de partida del vector gradiente (por defecto 0%)"
x2 = "al final del vector gradiente x. (por defecto 100%)"
y2 = "al final del vector gradiente y. (por defecto 0%)"
spreadMethod = "" cojín "o" reflejar "o" repetición "
xlink: href = "referencia a otro degradado cuyos valores de atributo se utilizan como valores por defecto y paradas incluyen recursiva".
<Marcador> Etiqueta puede ser colocado en el ápice líneas, polilíneas, polígonos y caminos. Estos elementos pueden ser utilizados maeker propiedad "maeker-start", "maeker-media" y "maeker-end", heredad por defecto, o se pueden configurar para URI "ninguno" o etiquetas definidas. Debe definir la etiqueta antes de que pueda ser referenciado por el URI. Cualquier tipo de forma, se puede poner etiquetas en el interior. Cuando dibujan los elementos para la fijación a la parte superior markerUnits = "strokeWidth 'o' userSpaceOnUse". Si anchoTrazo ", entonces el uso de una unidad es igual a la anchura de un accidente cerebrovascular. De lo contrario, no utilice la misma vista de etiquetas a gran escala de la unidad como un elemento de referencia (por defecto '') anchoTrazo"
reFX = "conexiones de vértices marcador de lugar (el valor por defecto es 0)."
Refy = "conexiones marcador de lugar de vértice (el valor por defecto es 0)."
orientar = "" auto "Siempre visualización desde un ángulo." auto "se calculará en un ángulo tal que el eje X de la tangente del vértice (por defecto es 0)
markerWidth = "width marcada (por defecto 3)."
markerHeight = "altura marcada (por defecto 3)."
viewBox = "puntos" visto "esta área de dibujo SVG. 4 valores separados por espacios o comas. (min x min, y, anchura, altura)"

+ Presentación atributos:
todos
<Máscara> La protección es una combinación de un valores de transparencia de no corte y. Como cortar, se puede usar un poco de gráficos, texto o máscara trayectoria definida. El estado por defecto de una máscara es completamente transparente, que es el opuesto del plano de recorte. En la parte opaca de la máscara de la máscara de ajustes de patrón maskUnits = ". 'userSpaceOnUse' o 'objectBoundingBox' definir si plano de delimitación es relativamente intacto ventana o un objeto (por defecto: 'objectBoundingBox')"
maskContentUnits = "posición relativa del objeto segundo dibujo de máscara utilizando porcentajes 'userSpaceOnUse' o 'objectBoundingBox' (por defecto: 'userSpaceOnUse')"
x = "máscara de recorte plano (por defecto: -10%)."
y = "máscara de recorte plano (por defecto: -10%)."
width = "máscara de recorte plano (por defecto: 120%)."
height = "máscara de recorte plano (por defecto: 120%)."
metadatos Especificada de metadatos
-glifo que falta
mpath
<Ruta> Definir un camino d = "comando de ruta definida por el"
PathLength = "Si existe, la ruta será modificada con el fin de calcular el valor de puntos equivalente a la longitud de este camino"
transformar = "Lista de conversión"

+ Mostrar propiedades:
Color, FillStroke, las imágenes, marcas
<Patrón> DET, el tamaño que desea ver los mensajes y puntos de vista. A continuación, añadir a su forma modal. Este patrón se repite golpeó el borde de la opinión de la caja (rango visible) id = "ID único que se utiliza para hacer referencia a este patrón." requerido.
patternUnits = "userSpaceOnUse 'o' objectBoundingBox". El segundo valor de X, Y, anchura, altura modo de cuadro utilizando una pequeña porción del objeto, la unidad (%). "
patternContentUnits = " 'userSpaceOnUse' o 'objectBoundingBox'"
patternTransform = "permite la expresión completa para convertir"
x = "modo de compensación, desde la esquina superior izquierda (por defecto es 0)."
y = "modo de desplazamiento, desde la esquina superior izquierda (por defecto es 0)."
width = "width azulejo de motivo (por defecto es 100%)."
height = "Altura de azulejo de motivo (por defecto es 100%)."
viewBox = "puntos" visto "esta área de dibujo SVG. 4 valores separados por espacios o comas. (min x min, y, anchura, altura)"
xlink: href = "Otro modelo, el valor de la propiedad es el valor por defecto y cualquier subclase puede heredar la recursividad."
<Polygon> Define un dibujo contiene al menos tres lados puntos = "punto del polígono. El número total de puntos deben ser aún". Requerido.
relleno regla = "sección FillStroke atributo de presentación"

+ Mostrar propiedades:
Color, FillStroke, las imágenes, marcas
<Polilínea> Definir cualquier forma sólo líneas rectas puntos de polilínea = "punto". Requerido.

+ Mostrar propiedades:
Color, FillStroke, las imágenes, marcas
<RadialGradient> Definición de gradual radiactivo. Crear un círculo degradado radial gradientUnits = " 'userSpaceOnUse' o 'objectBoundingBox'. Utilice el cuadro de vista u objeto para determinar la posición relativa de los puntos de vector. (El valor por defecto es 'objectBoundingBox)"
gradientTransform = "se aplica para transformar gradientes"
cx = "punto central del gradiente (números o% - 50% es el valor por defecto)."
cy = "punto central de la pendiente. (por defecto 50%)."
r = "radio gradual. (por defecto 50%)."
fx = "punto focal del degradado. (por defecto 0%)"
fy = "punto focal del degradado. (por defecto 0%)"
spreadMethod = "" cojín "o" reflejar "o" repetición "
xlink: href = "referencia a otro degradado cuyo valor de la propiedad como una recursión por defecto."
<Rect> Definir un rectángulo x = "eje x esquina superior izquierda del rectángulo".
y = "eje y de la esquina superior izquierda del rectángulo".
rx = "Radio (elemento de Ronda) x-eje."
ry = "radio del eje Y (elemento de Ronda)"
width = "anchura del rectángulo." Requerido.
height = "altura del rectángulo." Requerido.

+ Mostrar propiedades:
Color, FillStroke, Gráficos
guión contenedor de secuencias de comandos. (Tales como ECMAScript)
conjunto El establecimiento de un valor de la propiedad durante el tiempo especificado
<Parar> punto de degradado offset = "Stop Offset (0-1 / 0% a 100%)." Referencia
stop-color = "color de esta parada"
stop-opacidad = "Alto a la opacidad de la (0-1)."
estilo Las hojas de estilo pueden ser incorporados directamente en el interior de contenido SVG
<Svg> Crear un fragmento de documento SVG x = "incrustado en la esquina superior izquierda (por defecto es 0)."
y = "incrustado en la esquina superior izquierda (por defecto es 0)."
width = "fragmento SVG anchura (el valor por defecto es 100%)."
height = "fragmento SVG altura (el valor por defecto es 100%)."
viewBox = "puntos" visto "en esta área de dibujo SVG. 4 valores separados por espacios o comas. (min x, Min y, anchura, altura)"
preserveAspectRatio = "" ninguna "o cualquier 'xVALYVAL' nueve combinaciones, VAL es" min "," medio "o" max ". (por defecto ninguno)"
zoomAndPan = "" magnificar "o" opción disable'.Magnify permite a los usuarios desplazarse y hacer zoom sus archivos (por defecto extender) "
xml = "elemento más externo <svg> y su necesidad de instalar SVG espacio de nombres: xmlns =" ​​http://www.w3.org/2000/svg~~number=plural "xmlns: XLink =" http: //www.w3. org / 1999 / XLink "xml: space =" preserve ""

+ Mostrar propiedades:
todos
conmutador
símbolo
<Texto> Definir un texto x = "lista de X - .. La posición del eje en el texto en la posición de los n primeros caracteres del eje x enésimo si hay caracteres adicionales detrás, agotada después de la última posición de carácter colocaron 0 es el valor predeterminado."
y = "La posición del eje de la lista. (consulte x) 0 es el valor predeterminado."
dx = "moverse con respecto último glifo dibujado en la longitud de la lista de caracteres en la posición absoluta (consulte x)"
dy = "moverse con respecto último glifo dibujado en la longitud de la lista de caracteres de la posición absoluta (consulte x)"
gire = "una lista de turno de la rotación de orden n de los n primeros caracteres. caracteres adicionales no dieron un valor centrifugado final"
textLength = "Visor SVG tratará de mostrar el espacio entre el texto / la fuente o ajustar la longitud del texto de destino (por defecto: longitud normal del texto)."
lengthAdjust = "dice al espectador, si se intenta especificar la longitud ajustada para representar el texto. Estos dos valores son 'separación' y '' spacingAndGlyphs"

+ Mostrar propiedades:
Color, FillStroke, gráficos, FontSpecification, TextContentElements
textPath
título elementos puros en la descripción de texto SVG - no como parte de la gráfica para mostrar. Los agentes de usuario pueden presentar en forma de consejo
<Tref> Consulte cualquier documento SVG <texto> y reutilización elemento <TEXTO> Mismo
<Tspan> Elemento equivalente a la <texto>, pero puede estar anidada dentro del propio texto y la marca interna Idéntico al elemento <texto>
+ Además:
xlink: href = "referencia a un elemento <texto>"
<Uso> referencia URI utilizando un <G>, <svg> u otra propiedad tiene un identificador único y elementos gráficos repetidos. Copiar el elemento original, por lo que la presencia del archivo original es sólo una referencia. Original afectar a cualquier cambio en todas las copias. x = "elemento superior izquierda del clon eje x"
y = "izquierda del eje y elemento superior clon"
width = "clonación anchura del elemento"
height = "altura de los elementos de clonación"
xlink: href = "referencias URI elemento de clonación"

+ Mostrar propiedades:
todos
vista
vkern