SVG Manual de Referência
elemento SVG
| elemento | explicação | propriedade |
|---|---|---|
| <a> | Criar um link em torno elemento SVG | xlink: Show xlink: actuate xlink: href alvo |
| <AltGlyph> | Permite que um objeto do texto controles para processar dados caractere especial | X y dx dy rodar glyphRef formato xlink: href |
| <AltGlyphDef> | Define-se como uma série de símbolos para substituir | identidade |
| <AltGlyphItem> | Substituir a definição de uma série de símbolos, como o candidato | identidade |
| <Animate> | Dinamicamente alterar as propriedades ao longo do tempo | attributeName = "nome do atributo target" from = "start valor" to = "valor final" dur = "Duração" repeatCount = "animação em tempo irá ocorrer." |
| <AnimateColor> | Ao longo do tempo, o que é a conversão de cor | by = "valor de deslocamento relativo" from = "start valor" to = "valor final" |
| <AnimateMotion> | Assim que o elemento se move ao longo do caminho de movimento | calcMode = "modo de animação de interpolação pode ser 'discreta', 'linear', 'passeado', 'spline'" path = "caminho do movimento" keypoints = "ao longo do caminho do movimento do objecto da presente tempo deve ser movido longe." rodar = "aplica uma transformação de rotação." xlink: href = "URI referencia um elemento <caminho> que define o caminho de movimento." |
| <AnimateTransform> | Animação elemento de destino transformar uma propriedade, tornando o pan controle de animação, zoom, girar ou inclinar | by = "valor de deslocamento relativo" from = "start valor" to = "valor final" type = "Tipo de convertido cujas alterações de valor ao longo do tempo pode ser 'traduzir', 'escala', 'rodar', 'skewX', 'skewY'" |
| <Círculo> | A definição de um círculo | cx = "eixo-x de coordenadas do círculo." cy = "y coordenada no eixo do círculo." r = "raio do círculo." necessária. + Mostrar atributos: cor, FillStroke, gráficos |
| <ClipPath> | Usado para esconder objetos localizados fora a parte do caminho de recorte. Desenho eo que não define o que é chamado o desenho caminho die recorte | clip-path = "referências e referências trajeto de grampeamento recorte caminhos se cruzam." clipPathUnits = "userSpaceOnUse 'ou' objectBoundingBox". A fronteira segundo valor children de um objeto, usando uma pequena porção da unidade de máscara (padrão: "userSpaceOnUse") " |
| <Cor-profile> | Descrição especificada perfil de cor (ao usar arquivo de estilo CSS) | local = "perfil de cor armazenados localmente ID único" name = "" renderização de intenção = "auto | perceptual | relative-colorimétrico | saturação | absoluta colorimétrico" xlink: href = "recurso perfil ICC URI" |
| <Cursor> | Definir um cursor personalizado e independente de plataforma | x = "eixo-x do canto superior esquerdo do cursor (o padrão é 0)." y = "eixo y do canto superior esquerdo do cursor (o padrão é 0)." xlink: href = "Utilizar a imagem do cursor URI |
| <Defs> | referência de elemento contentor | |
| <Desc> | elementos puros em SVG descrição de texto - e não como parte do gráfico para exibir. Os agentes poderão exibir como uma dica de ferramenta | |
| <Ellipse> | A definição de uma elipse | cx = "oval x coordenada no eixo" cy = "eixo y oval coordenar" RX = "ao longo do eixo x do raio da elipse." Necessário. RY = "oblongo ao longo do raio do eixo y." Necessário. + Mostrar atributos: cor, FillStroke, gráficos |
| <FeBlend> | Usando diferentes modos de mistura para a síntese de dois objectos em conjunto | mode = "modos de mesclagem imagem: Normal | multiplicar | tela | escurecer | clarear" in = "identificada como a entrada bruta dado filtro: SourceGraphic | SourceAlpha | BackgroundImage | backgroundAlpha | FillPaint | StrokePaint | <filter-primitiva referência>" in2 = "segunda operação de mistura de imagem de entrada." |
| feColorMatrix | Filtro SVG. transformação de matriz adequada | |
| feComponentTransfer | Filtro SVG. componente-wise dados execução remapeamento | |
| feComposite | Filtros SVG | |
| feConvolveMatrix | Filtros SVG | |
| feDiffuseLighting | Filtros SVG | |
| feDisplacementMap | Filtros SVG | |
| feDistantLight | Filtro SVG. A definição de uma fonte de luz | |
| feFlood | Filtros SVG | |
| feFuncA | Filtro SVG. elementos filho feComponentTransfer | |
| feFuncB | Filtro SVG. elementos filho feComponentTransfer | |
| feFuncG | Filtro SVG. elementos filho feComponentTransfer | |
| feFuncR | Filtro SVG. elementos filho feComponentTransfer | |
| feGaussianBlur | Filtro SVG. imagem Gaussian Blur Executivo | |
| feImage | Filtro SVG. | |
| feMerge | Filtro SVG. Construído no topo de cada outra camada de imagem | |
| feMergeNode | Filtro SVG. elementos filho feMerge | |
| feMorphology | Filtro SVG. A implementação de "engorda" ou "afinamento" Graphics de origem | |
| feOffset | Filtro SVG. Em relação à sua posição actual de uma imagem em movimento | |
| fePointLight | Filtros SVG | |
| feSpecularLighting | Filtros SVG | |
| feSpotLight | Filtros SVG | |
| feTile | Filtros SVG | |
| feTurbulence | Filtros SVG | |
| filtro | efeitos de filtro Container | |
| fonte | fontes personalizadas | |
| font-face | Descrever as características de uma fonte | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <G> | elemento contêiner para a combinação de elementos relacionados | id = "nome do grupo". fill = "cor de preenchimento do grupo." opacidade = "A opacidade grupo" + Mostrar propriedades: tudo |
| glifo | Para um dado gráficos personalizados hieróglifo | |
| glyphRef | definição pictograma pode ser usado | |
| hkern | ||
| <Imagem> | imagem personalizada | x = "eixo-x de coordenadas do canto superior esquerdo da imagem." y = "eixo y de coordenadas do canto superior esquerdo da imagem." width = "a largura da imagem." must. height = "altura da imagem." must. xlink :. href = "caminho da imagem" must. + Mostrar propriedades: Cores, gráficos, imagens, Viewports |
| <Linha> | Definir uma linha | x1 = "x-coordenada do ponto de uma linha reta de partida." y1 = "y coordenadas do ponto de uma linha reta de partida." x2 = "x-coordenar do ponto final da linha reta." y2 = "y coordenadas do ponto final da linha reta." + Mostrar propriedades: Cor, FillStroke, gráficos, marcadores |
| <LinearGradient> | Definir um gradiente linear. Ao utilizar um gradiente linear preencher objectos vetor, e pode ser definida como gradiente horizontal, vertical ou ângulo. | id = "atributo id podem definir um nome exclusivo para o gradiente. referências devem" gradientUnits = "" userSpaceOnUse 'ou' objectBoundingBox '. Use a caixa de exibição ou objeto para determinar o ponto vetor posição relativa. (default' objectBoundingBox) " gradientTransform = "aplica-se a alterar o gradiente" x1 = "x gradiente ponto de partida (default 0%)" y1 = "y ponto de gradiente de início (padrão 0%)" x2 = "o final do gradiente vetor x. (padrão 100%)" Y2 = "o final do gradiente vetor y. (padrão 0%)" spreadMethod = " 'pad' ou 'refletir' ou 'repeat'" xlink: href = "referência a outro gradiente cujos valores de atributo são usadas como padrões e paradas incluídos recursiva." |
| <Marcador> | Etiqueta pode ser colocada na ponta linhas, poligonais, polígonos e caminhos. Estes elementos podem ser usados maeker propriedade "maeker-start", "maeker-mid" e "maeker-end", Herdar padrão, ou pode ser configurado para URI "nenhum" ou tags definidas. Você deve definir a tag antes que possa ser referenciado pelo URI. Qualquer tipo de forma, você pode colocar as etiquetas no interior. Quando desenhar os elementos para anexá-los ao topo | markerUnits = "strokeWidth 'ou' userSpaceOnUse". Se strokeWidth ", então o uso de uma unidade é igual à largura de um acidente vascular cerebral. Caso contrário, não use a mesma vista em escala tag da unidade como um elemento de referência (padrão é 'strokeWidth')" reFX = "conexões de vértice lugar do marcador (o padrão é 0)." refy = "conexões lugar marcador vértice (o padrão é 0)." orient = " 'auto' sempre visualização da marca do ângulo." auto "será calculado em um ângulo de modo que o eixo X de uma tangente do vértice (o padrão é 0) markerWidth = "width marcada (padrão 3)." markerHeight = "altura marcada (padrão 3)." ViewBox = "pontos" visto "este SVG área de desenho. 4 valores separados por espaços ou vírgulas. (min x, y min, largura, altura)" + Atributos Apresentação: tudo |
| <Mask> | A blindagem é uma combinação de um valores de transparência e não cortante. Como recorte, você pode usar alguns gráficos, texto ou caminho definido máscara. O estado padrão de uma máscara é completamente transparente, que é o oposto do plano de corte. Na parte opaca da máscara padrão de configurações de máscara | maskUnits = "." userSpaceOnUse 'ou' objectBoundingBox 'definir se plano de corte é a janela relativamente intacta ou objeto (padrão:' objectBoundingBox ') " maskContentUnits = "segundo padrão máscara posição relativa objeto usando porcentagens de" userSpaceOnUse 'ou' objectBoundingBox '(padrão:' userSpaceOnUse ') " x = "máscara de corte plano (padrão: -10%)." y = "máscara de corte plano (padrão: -10%)." width = "máscara de corte plano (padrão: 120%)." height = "máscara de corte plano (padrão: 120%)." |
| metadados | metadados especificado | |
| falta-glifo | ||
| mpath | ||
| <Caminho> | Definir um caminho | d = "comando definido pelo caminho" comprimento da trajectória = "Se não é, o caminho irá ser dimensionado de modo a calcular o valor de pontos equivalente ao comprimento deste caminho" transformar = "Lista de Conversão" + Mostrar propriedades: Cor, FillStroke, gráficos, marcadores |
| <Pattern> | DET, o tamanho que você deseja visualizar displays e pontos de vista. Em seguida, adicione a sua forma de modo. Esse padrão se repete atingiu a borda da caixa de vista (faixa visível) | id = "ID exclusivo usado para fazer referência a esse padrão." necessária. patternUnits = "userSpaceOnUse 'ou' objectBoundingBox". O segundo valor de X, Y, largura, altura do quadro modo usando uma pequena porção do objecto, a unidade (%). " patternContentUnits = " 'userSpaceOnUse' ou 'objectBoundingBox'" patternTransform = "permite a expressão inteira para converter" x = "modo de deslocamento, a partir do canto superior esquerdo (o padrão é 0)." y = "modo de deslocamento, a partir do canto superior esquerdo (o padrão é 0)." width = "width padrão de telha (o padrão é 100%)." height = "height padrão de telha (o padrão é 100%)." ViewBox = "pontos" visto "este SVG área de desenho. 4 valores separados por espaços ou vírgulas. (min x, y min, largura, altura)" xlink: href = "Outro modelo, o valor da propriedade é o padrão e qualquer subclasse pode herdar recursão." |
| <Polygon> | Define um desenho contém, pelo menos, três lados | pontos = "ponto do polígono. O número total de pontos deve ser mesmo." Necessário. preenchê-rule = "seção FillStroke atributo presentation" + Mostrar propriedades: Cor, FillStroke, gráficos, marcadores |
| <Polyline> | Definir qualquer forma apenas linhas retas | pontos polilinha = "ponto". Necessário. + Mostrar propriedades: Cor, FillStroke, gráficos, marcadores |
| <RadialGradient> | Definição de gradual radioactivos. Criar um círculo gradiente radial | gradientUnits = "" userSpaceOnUse 'ou' objectBoundingBox '. Use a caixa de exibição ou objeto para determinar a posição relativa dos pontos do vetor. (O padrão é' objectBoundingBox) " gradientTransform = "aplica-se a transformar gradientes" cx = "ponto central do gradiente (números ou% - 50% é o padrão)." cy = "ponto central do gradiente. (padrão 50%)." r = "raio gradual. (padrão 50%)." fx = "ponto focal do gradiente. (padrão 0%)" fy = "ponto focal do gradiente. (padrão 0%)" spreadMethod = " 'pad' ou 'refletir' ou 'repeat'" xlink: href = "referência a outro gradiente cujo valor da propriedade como uma recursão padrão." |
| <Rect> | Definir um retângulo | x = "eixo-x canto esquerdo superior do retângulo." y = "eixo y do canto superior esquerdo do rectângulo." rx = "Radius (elemento de volta) do eixo-x." RY = "raio do eixo y (elemento redondo)" width = "largura do retângulo." Necessário. height = "altura do retângulo." Necessário. + Mostrar propriedades: Cor, FillStroke, gráficos |
| escrita | recipiente Script. (Tais como ECMAScript) | |
| conjunto | A definição de um valor da propriedade para o tempo especificado | |
| <Parar> | parada de gradiente | offset = "Parar Offset (0-1 / 0% a 100%)." Referência pare-color = "color esta paragem" stop-opacidade = "Pare a opacidade da (0-1)." |
| estilo | As folhas de estilo podem ser incorporados diretamente dentro de conteúdo SVG | |
| <Svg> | Criar um fragmento do documento SVG | x = "incorporado no canto superior esquerdo (padrão é 0)." y = "incorporado no canto superior esquerdo (padrão é 0)." width = "fragmento SVG largura (o padrão é 100%)." height = "height fragmento de SVG (o padrão é 100%)." ViewBox = "pontos" visto "nesta área de desenho SVG. 4 valores separados por espaços ou vírgulas. (min x, y min, largura, altura)" preserveAspectRatio = " 'none' ou qualquer" xVALYVAL 'nove combinações, VAL é "min", "meio" ou "max". (nenhum padrão) " zoomAndPan = " 'amplia' ou 'opção disable'.Magnify permite aos usuários deslocar e ampliar seus arquivos (padrão ampliar)" xml = "ultraperiféricas <svg> elemento e sua necessidade de instalar namespace SVG: xmlns =" http://www.w3.org/2000/svg~~number=plural "xmlns: xlink =" http: //www.w3. org / 1999 / xlink "xml: space =" preserve "" + Mostrar propriedades: tudo |
| interruptor | ||
| símbolo | ||
| <Text> | Definir um texto | x = "lista de X - .. A posição do eixo no texto na posição dos primeiros n caracteres do eixo x-n-th se houver caracteres extras para trás, exausto após a última posição do caractere eles colocaram 0 é o padrão." y = "posição do eixo Y da lista. (consulte x) 0 é o padrão." dx = "mover glifo última desenhada em relação ao comprimento da lista de caracteres na posição absoluta (consulte a x)" dy = "mover glifo última desenhada em relação ao comprimento da lista de caracteres na posição absoluta (consulte a x)" gire = "uma lista rotativa da rotação n-th dos primeiros n caracteres. caracteres adicionais não deu um valor de spin final" textLength = "SVG Viewer vai tentar mostrar o espaçamento entre o texto / pia batismal ou ajustar o comprimento do texto de destino (padrão: comprimento normal do texto)." lengthAdjust = "diz o espectador, se você tentar especificar o comprimento ajustado para tornar o texto. Estes dois valores são" espaçamento "e" spacingAndGlyphs ' " + Mostrar propriedades: Cor, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| título | elementos puros em SVG descrição de texto - e não como parte do gráfico para exibir. Os agentes poderão exibir como uma dica de ferramenta | |
| <Tref> | Referem-se a qualquer documento SVG <text> elemento e reutilização | O mesmo elemento <text> |
| <Tspan> | Elemento equivalente ao <text>, mas pode ser aninhado dentro do próprio texto e a marca interna | Idêntico ao elemento <text> + Além disso: xlink: href = "referência a um elemento <text>" |
| <Uso> | referência URI usando um <G>, <svg> ou outra propriedade tem um ID único e elementos gráficos repetidos. Copie o elemento original, de modo que a presença do arquivo original é apenas uma referência. Original afetar qualquer mudança em todas as cópias. | x = "elemento superior esquerdo do clone eixo x" y = "top esquerda do eixo y elemento clone" width = "clonagem largura elemento" height = "altura do elemento clonagem" xlink: href = "URI referências elemento de clonagem" + Mostrar propriedades: tudo |
| vista | ||
| vkern |