English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG reference manual collects common SVG elements, as well as the usage methods of element attributes, and detailed usage parameters, usage descriptions, etc.
| element | description | attribute |
|---|---|---|
| <a> | create a link around an SVG element | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | allow object text to control, to present special character data | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | define a series of replacements for symbolic characters | id |
| <altGlyphItem> | define a series of replacements for candidate symbolic characters | id |
| <animate> | change properties dynamically over time | attributeName="target attribute name" from="Valor inicial" to="Valor final" dur="duration" repeatCount="A animação acontecerá durante o tempo" |
| <animateColor> | Define a conversão de cor ao longo do tempo | by="Valor de deslocamento relativo" from="Valor inicial" to="Valor final" |
| <animateMotion> | Faz o elemento se mover ao longo do caminho de ação | calcMode="Modo de interpolação da animação. Pode ser39;discrete',
'linear',39;paced',39;spline'" path="Caminho de movimento" keyPoints="Quanto longe o objeto deve mover-se ao longo do caminho de movimento na atual hora" rotate="Aplicar transformação de rotação" xlink:href="Um URI que referencia o elemento <path> que define o caminho de movimento" |
| <animateTransform> | Transforma a propriedade de transformação do elemento alvo da animação, permitindo que a animação controle a translação, escalonamento, rotação ou inclinação | by="Valor de deslocamento relativo" from="Valor inicial" to="Valor final" type="Conversão de tipo, cujo valor muda ao longo do tempo. Pode ser39;translate',39;scale',39;rotate',39;skewX',39;skewY'" |
| <circle> | Define um círculo | cx="Coordenada x do círculo" cy="Coordenada y do círculo" r="Raio do círculo". Obrigatório. + propriedades visíveis: cor, preenchimento, traço, gráfico |
| <clipPath> | Usado para ocultar a parte do objeto que está fora do caminho de recorte. O molde que define o que será desenhado e o que não será desenhado é chamado de caminho de recorte | clip-path="Referência para caminho de recorte e interseção de caminhos de recorte" clipPathUnits="userSpaceOnUse' ou'objectBoundingBox". O segundo valor childern define a borda de um objeto, usando uma pequena parte da unidade de máscara (padrão: "userSpaceOnUse")" |
| <color-profile> | Especifica a descrição do arquivo de configuração de cor (ao usar arquivo de estilo CSS) | local="ID único do arquivo de configuração de cor armazenado localmente" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="URI do recurso de arquivo de configuração ICC" |
| <cursor> | Define um cursor personalizado independente da plataforma | x="Canto superior esquerdo do cursor no eixo x (padrão é 0)" y="Canto superior esquerdo do cursor no eixo y (padrão é 0)" xlink:href="URI da imagem de cursor usada" |
| <defs> | Contêiner de elementos citados | |
| <desc> | Descrição de texto pura de elementos no SVG - Não é exibido como parte da imagem gráfica. O agente de usuário o exibirá como uma dica de ferramenta | |
| <ellipse> | define uma elipse | cx="coordenada x do eixo x da elipse" cy="coordenada y do eixo y da elipse" rx="raio da elipse ao longo do eixo x". Obrigatório. ry="raio da elipse ao longo do eixo y". Obrigatório. + propriedades visíveis: cor, preenchimento, traço, gráfico |
| <feBlend> | use diferentes modos de mistura para combinar dois objetos | mode="modo de mistura de imagem: normal|multiplicar|tela|escurecer|iluminar" in="identificado como a entrada original do filtro: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitiva-reference>" in2="operação de mistura da imagem de entrada secundária" |
| feColorMatrix | filtro SVG. Aplica a transformação de matriz | |
| feComponentTransfer | filtro SVG. Executa o componente de dados-remapamento inteligente | |
| 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. Elemento filho do feComponentTransfer | |
| feFuncB | filtro SVG. Elemento filho do feComponentTransfer | |
| feFuncG | filtro SVG. Elemento filho do feComponentTransfer | |
| feFuncR | filtro SVG. Elemento filho do feComponentTransfer | |
| feGaussianBlur | filtro SVG. Executa o borrão gaussiano na imagem | |
| feImage | filtro SVG. | |
| feMerge | filtro SVG. Construído sobre camadas de imagens umas sobre as outras | |
| feMergeNode | filtro SVG. Elemento filho do feMerge | |
| feMorphology | filtro SVG. Executa "engrossamento" ou "fio de arame" na forma de origem | |
| feOffset | filtro SVG. Move a imagem em relação à sua posição atual | |
| fePointLight | filtro SVG | |
| feSpecularLighting | filtro SVG | |
| feSpotLight | filtro SVG | |
| feTile | filtro SVG | |
| feTurbulence | filtro SVG | |
| filter | container de efeito de filtro | |
| font | define a fonte | |
| font-face | descreve as características de uma fonte | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | usado como elemento contenedor para combinar elementos relacionados | id="nome do grupo" fill="cor de preenchimento do grupo" opacity="opacidade do grupo" + Atributos Apresentados: All |
| glyph | definir o gráfico para o símbolo pictórico dado | |
| glyphRef | definir o símbolo pictórico possível a ser usado | |
| hkern | ||
| <image> | definir imagem | x="coordenada x do canto superior esquerdo da imagem" y="coordenada y do canto superior esquerdo da imagem" width="largura da imagem". É obrigatório. height="altura da imagem". É obrigatório. xlink:href="caminho da imagem". É obrigatório. + Atributos Apresentados: Cor, Gráficos, Imagens, Vistas |
| <line> | definir uma linha | x1="coordenada x do ponto de partida da linha" y1="coordenada y do ponto de partida da linha" x2="coordenada x do ponto final da linha" y2="coordenada y do ponto final da linha" + Atributos Apresentados: Cor, Preenchimento, Gráficos, Marcadores |
| <linearGradient> | definir gradiente linear. Através do preenchimento de objetos com gradiente vetorial linear, pode ser definido como gradiente horizontal, vertical ou angular. | id="propriedade id que pode definir um nome único para a gradiente. A referência deve gradientUnits="#39;userSpaceOnUse#39; ou #39;objectBoundingBox#39;Usar a caixa de vista ou o objeto para determinar o vetor de pontos de posição relativa. (padrão é'objectBoundingBox" gradientTransform="transformação aplicável ao gradiente" x1="ponto de partida do vetor de gradiente x (padrão 0%)" y1="ponto de partida do vetor de gradiente y (padrão 0%)" x2="ponto final do vetor de gradiente x. (padrão100％）" y2="ponto final do vetor de gradiente y. (padrão 0%)" spreadMethod="#39;pad#39; ou #39;reflect#39; ou #39;repeat#39;" xlink:href="referência a outro gradiente cujos valores de atributo são usados como padrões e paradas incluídas. Recursivo" |
| <marker> | O marcador pode ser colocado nos vértices de retas, curvas, polígonos e caminhos. Esses elementos podem usar o atributo "marker"-"start", "marker-"mid" e "marker-end", herdando o padrão ou pode ser definido como "none" ou o URI do marcador definido. Você deve definir o marcador primeiro, antes de poder referenciá-lo pelo seu URI. Qualquer forma, pode colocar o marcador dentro dela. Eles adicionam os elementos de desenho ao topo | markerUnits="larguraDaLinha' ou'userSpaceOnUse". Se for "larguraDaLinha" então usa um unitário igual à largura de um traço. Caso contrário, a escala do marcador não usará a mesma unidade de vista como referência para o elemento (padrão é'larguraDaLinha') refx="marcador de localização de conexão de vértice (padrão é 0)" refy="posição de conexão do vértice do marcador (padrão é 0)" orient="'auto'sempre mostrar o ângulo do marcador. "auto" calculará um ângulo que faça o valor tangente do vértice X do eixo X (padrão é 0) markerWidth="largura do marcador (padrão3)" markerHeight="altura do marcador (padrão3)" viewBox="os pontos" ver "esta área de desenho SVG. Separados por espaço ou vírgula4um valor. (min x, min y, width, height)" + atributos de apresentação: All |
| <mask> | um efeito de máscara é uma combinação de valores de opacidade e recorte. Como recorte, você pode usar gráficos, texto ou caminho para definir parte da máscara. O estado padrão de uma máscara é completamente transparente, ou seja, do lado oposto ao plano de recorte. No conjunto gráfico, configure a parte opaca da máscara | maskUnits="'userSpaceOnUse#39; ou #39;objectBoundingBox#39;. Determine se a máscara é relativa ao painel completo da janela ou ao objeto (padrão:'objectBoundingBox#39;) maskContentUnits="a segunda máscara usa a posição gráfica relativa ao objeto em porcentagem'userSpaceOnUse#39; ou'objectBoundingBox#39;(padrão:'userSpaceOnUse#39;) x="máscara de recorte (valor padrão:-10％) y="máscara de recorte (valor padrão:-10％) width="máscara de recorte (padrão é:120％）" height="máscara de recorte (padrão é:120％）" |
| metadata | especificar metadados | |
| missing-glyph | ||
| mpath | ||
| <path> | defina um caminho | d="definição de instruções de caminho" pathLength="se existir, a linha será escalada para calcular a distância equivalente a este valor para cada ponto" transform="lista de transformações" + Atributos Apresentados: Cor, Preenchimento, Gráficos, Marcadores |
| <pattern> | Defina as coordenadas, o tamanho da visão desejada e o tamanho da visão. Em seguida, adicione ao seu forma de padrão. Quando o padrão acerta, repete os limites da caixa de visão (área visível) | id="ID único usado para referenciar este padrão. Obrigatório." patternUnits="userSpaceOnUse' ou'objectBoundingBox". O segundo valor X, Y, width, height é uma pequena parte da borda do objeto do padrão que será usada, em unidade (%)" patternContentUnits="'userSpaceOnUse#39; ou 'objectBoundingBox#39;" patternTransform="permite que a expressão inteira seja transformada" x="deslocamento do padrão, a partir do canto superior esquerdo (padrão é 0)" y="deslocamento do padrão, a partir do canto superior esquerdo (padrão é 0)" width="largura do tiling do padrão (padrão é100％）" height="altura do tiling do padrão (padrão é100％）" viewBox="os pontos" ver "esta área de desenho SVG. Separados por espaço ou vírgula4um valor. (min x, min y, width, height)" xlink:href="Outro padrão, cujos valores de atributo são os padrões e qualquer subclasse pode herdar. Recursivo" |
| <polygon> | Definir um gráfico que contenha pelo menos três lados | points="Ponto do polígono. O número total de pontos deve ser par". Obrigatório. fill-rule="A parte do atributo FillStroke demonstrativo" + Atributos Apresentados: Cor, Preenchimento, Gráficos, Marcadores |
| <polyline> | Definir uma forma composta apenas por linhas | points="Ponto" na linha reta. Obrigatório. + Atributos Apresentados: Cor, Preenchimento, Gráficos, Marcadores |
| <radialGradient> | Definir um gradiente radial. O gradiente radial cria um círculo | gradientUnits="#39;userSpaceOnUse#39; ou #39;objectBoundingBox#39;. Use a caixa de visualização ou o objeto para determinar os pontos vetoriais de posição relativa. (padrão de #39;objectBoundingBox" gradientTransform="Transformação aplicável ao gradiente" cx="Ponto central do gradiente (número ou %" - 50% é o padrão) cy="Ponto central do gradiente. (padrão50％）" r="Raio do gradiente. (padrão50％）" fx="Ponto de foco do gradiente. (padrão 0%)" fy="Ponto de foco do gradiente. (padrão 0%)" spreadMethod="#39;pad#39; ou #39;reflect#39; ou #39;repeat#39;" xlink:href="Referência para outro gradiente, cujos valores de atributo são os padrões. Recursivo" |
| <rect> | Definir um retângulo | x="Coordenada x do canto superior esquerdo do retângulo" y="Coordenada y do canto superior esquerdo do retângulo" rx="Raio no eixo x (elemento arredondado" ry="Raio no eixo y (elemento arredondado" width="Largura do retângulo". Obrigatório. height="Altura do retângulo". Obrigatório. + Atributos Apresentados: Cor, Preenchimento, Gráficos |
| script | Container de script (por exemplo, ECMAScript) | |
| set | Definir um valor de atributo para um momento específico | |
| <stop> | Parada de gradiente | offset="Deslocamento do Stop (de 0 a1/0% a100%)
Referência stop-color="Cor deste stop" stop-opacity="Opacidade deste Stop (de 0 a1)" |
| style | Permite que as folhas de estilo sejam diretamente incorporadas no conteúdo SVG | |
| <svg> | Criar um fragmento de documento SVG | x="Inserção superior esquerda (padrão é 0" y="Inserção superior esquerda (padrão é 0" width="Largura do fragmento SVG (padrão é100％）" height="Altura do fragmento SVG (padrão de)100％）" viewBox="Ponto "seen" esta área de desenho SVG. Separados por espaço ou vírgula4esses valores. (min x, min y, largura, altura)" preserveAspectRatio="#39;none#39; ou qualquer #39;xVALYVAL#39;9essas combinações, VAL é "min", "mid" ou "max". (Padrão none)" zoomAndPan="#39;magnify#39; ou #39;disable#39;Opção de Ampliar permite que o usuário desloque e amplie seu arquivo (padrão Ampliar )" xml="O elemento mais externo <svg> precisa instalar SVG e seu espaço de nomes: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + Atributos Apresentados: All |
| switch | ||
| symbol | ||
| <text> | Definir um texto | x="Posição do eixo X da lista -Posição do eixo. No texto, a posição da n-ésima letra está na n-ésima posição do eixo X. Se houver caracteres adicionais, eles serão colocados na posição após o último caractere. 0 é o padrão" y="Posição do eixo Y da lista. (Referência x) 0 é o padrão" dx="Mover a posição absoluta em relação ao último símbolo desenhado na lista de comprimento de caractere. (Referência x)" dy="Mover a posição absoluta em relação ao último símbolo desenhado na lista de comprimento de caractere. (Referência x)" rotate="Uma lista de rotação. A rotação da n-ésima é a n-ésima letra. Os caracteres adicionais não têm valor de rotação final" textLength="O visualizador SVG tentará exibir o espaçamento entre os textos/ou ajuste de comprimento de pincel do texto alvo. (Padrão: comprimento do texto normal)" lengthAdjust="Informa ao visualizador para ajustar o comprimento especificado para exibir o texto. Esses dois valores são #39;spacing#39; e #39;spacingAndGlyphs#39;" + Atributos Apresentados: Cor, Preenchimento, Pincel, Especificação de Fonte, Elementos de Conteúdo de Texto |
| textPath | ||
| title | Descrição de texto pura de elementos no SVG - Não é exibido como parte da imagem gráfica. O agente de usuário o exibirá como uma dica de ferramenta | |
| <tref> | Citando qualquer elemento <text> de um documento SVG e reutilizando | O elemento <TEXT> é idêntico |
| <tspan> | O elemento é equivalente ao <text>, mas pode conter marcadores de texto internos e o próprio texto dentro deles | Idêntico ao elemento <text> + Adicionalmente: xlink:href="Referência a um elemento <TEXT>" |
| <use> | Usar URI para referenciar um <G>, <svg> ou outro elemento que tenha um atributo ID único e elementos gráficos repetidos. A cópia é do elemento original, portanto, a existência original no arquivo é apenas uma referência. Qualquer alteração original afeta todos os duplicados. | x="Eixo x do canto superior esquerdo do elemento clonado" y="Eixo y do canto superior esquerdo do elemento clonado" width="Largura do elemento clonado" height="Altura do elemento clonado" xlink:href="URI para referência de clonagem de elementos" + Atributos Apresentados: All |
| view | ||
| vkern |