Fórum | tutoriais mais recente desenvolvimento web
 

SVG Referência


SVG Elements

Elemento Descrição Atributos
<a> Cria um link em torno de elementos SVG xlink:show
xlink:actuate
xlink:href
target
<altGlyph> Fornece controle sobre os glifos usados ​​para tornar especial de dados de caracteres x
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef> Define um conjunto de substituição de glifos id
<altGlyphItem> Define um conjunto candidato de substituições de glifos id
<animate> Define como um atributo de um elemento muda ao longo do tempo 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> Faz com que um elemento referenciado para mover ao longo de um caminho de movimento 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 um atributo de transformação em um elemento de destino, permitindo assim que animações para controlar a tradução, escala, rotação e / ou inclinar 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 um 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> Clipping é de cerca de esconder o que normalmente seriam atraídos. O estêncil que define o que é eo que não é desenhado é chamado um caminho de recorte 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 uma descrição perfil de cor (quando o documento é denominado 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 um cursor personalizado e independente de 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> Um recipiente para elementos referenciados  
<desc> Uma descrição somente de texto para elementos de contentores ou elementos gráficos em SVG (agentes poderão exibir o texto como uma dica)  
<ellipse> Define uma 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> Compõe dois objectos em conjunto de acordo com um certo modo de mistura 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. Aplica-se uma transformação de matriz  
feComponentTransfer Filtro SVG. Executa remapeamento componente-wise de dados  
feComposite Filtro SVG.  
feConvolveMatrix Filtro SVG.  
feDiffuseLighting Filtro SVG.  
feDisplacementMap Filtro SVG.  
feDistantLight Filtro SVG. Define uma fonte de luz  
feFlood Filtro SVG.  
feFuncA Filtro SVG. Sub-elemento para feComponentTransfer  
feFuncB Filtro SVG. Sub-elemento para feComponentTransfer  
feFuncG Filtro SVG. Sub-elemento para feComponentTransfer  
feFuncR Filtro SVG. Sub-elemento para feComponentTransfer  
feGaussianBlur Filtro SVG. Executa um Gaussian Blur na imagem  
feImage Filtro SVG.  
feMerge Filtro SVG. Cria camadas de imagem em cima uns dos outros  
feMergeNode Filtro SVG. Sub-elemento para feMerge  
feMorphology Filtro SVG. Executa um "fattening" ou "thinning" em um gráfico de origem  
feOffset Filtro SVG. Move um parente para sua posição atual  
fePointLight Filtro SVG.  
feSpecularLighting Filtro SVG.  
feSpotLight Filtro SVG.  
feTile Filtro SVG.  
feTurbulence Filtro SVG.  
filter Recipiente para efeitos de filtro  
font Define um tipo de letra  
font-face Descreve as características de uma fonte  
font-face-format 
font-face-name 
font-face-src 
font-face-uri 
foreignObject 
<g> Usado 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 os gráficos para um determinado glifo  
glyphRef Define um glifo possível usar  
hkern 
<image> Define uma imagem 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 uma linha 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 um gradiente linear. Os gradientes lineares preencher o objecto através da utilização de um vector, e pode ser definido como gradientes horizontais, verticais ou 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> Os marcadores podem ser colocados nos vértices de linhas, poligonais, polígonos e caminhos. Estes elementos podem usar o marker atributos "marker-start" , "marker-mid" e "marker-end" "que herdam por padrão ou pode ser definida para 'none' ou o URI de um marcador definido. Você deve primeiro definir o marcador antes que você possa consultá-la através do seu URI. Qualquer tipo de forma pode ser colocado dentro do marcador. Eles são desenhados na parte superior do elemento estão ligados para 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> Masking é uma combinação de valores de opacidade e recorte. Como grampear você pode usar formas, texto ou caminhos para definir seções da máscara. O estado padrão de uma máscara é totalmente transparente, que é o oposto do plano de recorte. Os gráficos de uma máscara define como partes opacas da máscara são 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 metadados  
missing-glyph 
mpath 
<path> Define um caminho 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 as coordenadas você deseja que o objectivo de mostrar e o tamanho do ponto de vista. Em seguida, você adicionar formas em seu padrão. O padrão se repete quando uma borda da caixa de visualização (viewing area) é atingido 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 um gráfico que contém pelo menos três 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 qualquer forma que consiste em apenas linhas retas points="the points on the polyline". Required.

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<radialGradient> Define um gradiente radial. gradientes radiais são criados tomando um círculo e sem problemas a mudança de valores entre os limites de gradiente do ponto de foco para o raio 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 um retâ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 Recipiente para scripts (eg, ECMAScript)  
set Define o valor de um atributo para um período especificado  
<stop> As paradas para um 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 as folhas de estilo para ser incorporado diretamente no conteúdo SVG  
<svg> Cria um 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 um 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 Uma descrição somente de texto para elementos em SVG - não apresentado como parte dos gráficos. Os agentes poderão exibir o texto como uma dica  
<tref> Referências qualquer <text> elemento no documento SVG e reutilizá-lo Identical to the <text> element
<tspan> Idêntico ao <text> elemento, mas pode ser aninhado dentro de marcas de texto e dentro de si Identical to the <text> element
+ in addition:
xlink:href="Reference to a <text> element"
<use> Usa um URI para fazer referência a <g>, <svg> elemento gráfico ou outro com um atributo id único e replicá-la. A cópia é apenas uma referência para o original tão só existe o original no documento. Qualquer alteração ao original afeta todas as cópias. 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