English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le manuel de référence SVG collecte les éléments courants de SVG, les méthodes d'utilisation des attributs des éléments, ainsi que les paramètres d'utilisation détaillés, les descriptions d'utilisation, etc.
| élément | description | attribut |
|---|---|---|
| <a> | créer un élément SVG autour des liens | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | permettre aux textes objectifs de contrôler pour présenter des données de caractères spéciaux | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | définir un ensemble de remplacements de symboles symboliques | id |
| <altGlyphItem> | définir un ensemble de remplacements de symboles symboliques candidats | id |
| <animate> | changement dynamique des attributs au fil du temps | attributeName="nom de l'attribut cible" from="Valeur de départ" to="Valeur de fin" dur="durée" repeatCount="Le temps pendant lequel l'animation se produira" |
| <animateColor> | Définir la transformation de couleur au fil du temps | by="Valeur de décalage relatif" from="Valeur de départ" to="Valeur de fin" |
| <animateMotion> | Fait déplacer l'élément le long du chemin d'action | calcMode="Mode d'interpolation de l'animation. Peut être'discrete',
'linear',39;paced',39;spline'" path="Chemin de déplacement" keyPoints="Distance que l'objet doit se déplacer le long du chemin de déplacement à l'instant actuel" rotate="Application de la transformation de rotation" xlink:href="URI d'un élément <path> qui définit le chemin de déplacement" |
| <animateTransform> | Transforme les propriétés de transformation de l'élément cible de l'animation, ce qui permet de contrôler l'animation de déplacement, d'agrandissement, de rotation ou d'inclinaison | by="Valeur de décalage relatif" from="Valeur de départ" to="Valeur de fin" type="Conversion de type, dont la valeur change au fil du temps. Peut être 'translate',39;scale',39;rotate',39;skewX',39;skewY'" |
| <circle> | Définir un cercle | cx="Coordonnée x de l'axe du cercle" cy="Coordonnée y de l'axe du cercle" r="Rayon du cercle". Obligatoire. + propriétés apparentes : couleur, FillStroke, graphique |
| <clipPath> | Utilisé pour cacher une partie de l'objet située en dehors du chemin de coupe. Le moule définissant ce qui doit être dessiné et ce qui ne doit pas l'être est appelé chemin de coupe | clip-path="Référence au chemin de coupe et à l'intersection de chemins de coupe" clipPathUnits="userSpaceOnUse&#"39; ou'objectBoundingBox". La deuxième valeur childern d'un objet bordure, elle utilise une petite partie de l'unité de masque (par défaut : "userSpaceOnUse")" |
| <color-profile> | Spécification des instructions de fichier de configuration de couleur (lorsque le fichier de style CSS est utilisé) | local="ID unique de fichier de configuration de couleur stocké localement" name="" rendering-intent="auto|perceptual|relative"-colorimetric|saturation|absolute-colorimetric" xlink:href="URI de la ressource de fichier de configuration ICC" |
| <cursor> | Définir un curseur personnalisé indépendant de la plateforme | x="Coin supérieur gauche de la souris sur l'axe x (par défaut 0)" y="Coin supérieur gauche de la souris sur l'axe y (par défaut 0)" xlink:href="URI de l'image de curseur utilisée" |
| <defs> | Conteneur d'éléments de référence | |
| <desc> | description de texte brute d'un élément dans SVG - ne fait pas partie de la partie graphique à afficher. L'agent utilisateur l'affichera sous forme de tooltip | |
| <ellipse> | définit une ellipse | cx="coordonnée x de l'ellipse" cy="coordonnée y de l'ellipse" rx="rayon de l'ellipse le long de l'axe x". Obligatoire. ry="rayon de l'ellipse le long de l'axe y". Obligatoire. + propriétés apparentes : couleur, FillStroke, graphique |
| <feBlend> | combiner deux objets ensemble en utilisant différents modes de mélange | mode="mode de mélange d'image : normal|multiplier|screen|darken|lighten" in="identifié comme l'entrée primaire du filtre donné : SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="opérations de mélange de l'image d'entrée deuxièmement" |
| feColorMatrix | filtre SVG. Applique une transformation matricielle | |
| feComponentTransfer | filtre SVG. Exécute les composants de données-rémappe intelligente | |
| feComposite | filtre SVG | |
| feConvolveMatrix | filtre SVG | |
| feDiffuseLighting | filtre SVG | |
| feDisplacementMap | filtre SVG | |
| feDistantLight | filtre SVG. Définit une source de lumière | |
| feFlood | filtre SVG | |
| feFuncA | filtre SVG. Élément fils de feComponentTransfer | |
| feFuncB | filtre SVG. Élément fils de feComponentTransfer | |
| feFuncG | filtre SVG. Élément fils de feComponentTransfer | |
| feFuncR | filtre SVG. Élément fils de feComponentTransfer | |
| feGaussianBlur | filtre SVG. Exécute un flou gaussien sur l'image | |
| feImage | filtre SVG. | |
| feMerge | filtre SVG. Construit sur des images de couches supérieures | |
| feMergeNode | filtre SVG. Élément fils de feMerge | |
| feMorphology | filtre SVG. Exécute "épaississement" ou "affinissement" sur le graphique source | |
| feOffset | filtre SVG. Déplacez l'image par rapport à sa position actuelle | |
| fePointLight | filtre SVG | |
| feSpecularLighting | filtre SVG | |
| feSpotLight | filtre SVG | |
| feTile | filtre SVG | |
| feTurbulence | filtre SVG | |
| filter | conteneur d'effet de filtre | |
| font | définir une police de caractères | |
| font-face | décrire les caractéristiques d'une police de caractères | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | Élément conteneur utilisé pour regrouper des éléments associés | id="nom du groupe" fill="couleur de remplissage du groupe" opacity="opacité du groupe" + Propriétés manifestes: All |
| glyph | Définir le graphique pour le symbole pictographique donné | |
| glyphRef | Définir les éventuels symboles pictographiques à utiliser | |
| hkern | ||
| <image> | Définir une image | x="coordonnée x du coin supérieur gauche de l'image" y="coordonnée y du coin supérieur gauche de l'image" width="largeur de l'image". Obligatoire. height="hauteur de l'image". Obligatoire. xlink:href="chemin de l'image". Obligatoire. + Propriétés manifestes: Couleur, Graphiques, Images, Fenêtres de vue |
| <line> | Définir une ligne | x1="coordonnée x de départ de la ligne" y1="coordonnée y de départ de la ligne" x2="coordonnée x finale de la ligne" y2="coordonnée y finale de la ligne" + Propriétés manifestes: Couleur, Remplissage, Graphics, Markers |
| <linearGradient> | Définir une dégradé linéaire. En utilisant un remplissage de dégradé vectoriel, il peut être défini comme une dégradé horizontale, verticale ou angulaire. | id="id attribut peut définir un nom unique pour la dégradé. Les références doivent" gradientUnits="#39;userSpaceOnUse#39; ou 'objectBoundingBox#39;Utilisez le cadre de vue ou l'objet pour déterminer le vecteur de position relative. (par défaut de'objectBoundingBox" gradientTransform="transformation applicable à la dégradé" x1="point de départ de la dégradé vectorielle x (par défaut 0%)" y1="point de départ de la dégradé vectorielle y (par défaut 0%)" x2="point final de la dégradé vectorielle x. (par défaut100％）" y2="point final de la dégradé vectorielle y. (par défaut 0%)" spreadMethod="#39;pad#39; ou 'reflect#39; ou 'repeat#39;" xlink:href="référence à une autre dégradé dont les valeurs d'attributs sont utilisées comme defaults and stops included. Recursive" |
| <marker> | La marqueur peut être placé sur les sommets des lignes, des segments de ligne, des polygones et des chemins. Ces éléments peuvent utiliser la propriété "marker" de l'attribut-"start", "marker-"mid" et "marker-end", hérite des valeurs par défaut ou peut être définie par l'URI du marqueur. Vous devez d'abord définir le marqueur, puis vous pouvez le faire via son URI. N'importe quelle forme peut contenir le marqueur. Ils l'attachent à la partie supérieure des éléments qu'ils dessinent | markerUnits="largeurDeTrait' ou'userSpaceOnUse". Si c'est le cas pour "largeurDeTrait", une unité vaut une largeur de trait. Sinon, la marqueur n'utilisera pas la même unité de vue pour l'élément de référence (par défaut de'largeurDeTrait') refx="marqueur de position de connexion des sommets (par défaut 0)" refy="position de connexion du sommet de la marque (par défaut 0)" orient="'auto'toujours afficher l'angle de la marque. "auto" calcule un angle qui rend la tangente de l'axe des abscisses d'un sommet (par défaut 0) markerWidth="largeur de la marque (par défaut3)" markerHeight="hauteur de la marque (par défaut3)" viewBox="les points" voir cette zone de dessin SVG. Séparés par des espaces ou des virgules4une valeur.(min x, min y, width, height)" + attributs de présentation: All |
| <mask> | Un masque en degré est une combinaison de valeurs d'opacité et de coupe. Comme la coupe, vous pouvez utiliser des graphiques, du texte ou des chemins pour définir une partie du masque. Par défaut, un masque est complètement transparent, c'est-à-dire de l'autre côté de la surface de coupe. Dans la configuration graphique du masque, définir la partie opaque du masque | maskUnits="'userSpaceOnUse#39; ou 'objectBoundingBox#39;. Définir si le masque est relatif à la fenêtre complète ou à l'objet (par défaut :'objectBoundingBox#39;) maskContentUnits="la deuxième masque par rapport à la position graphique de l'objet utilise des pourcentages'userSpaceOnUse#39; ou'objectBoundingBox#39;(par défaut :'userSpaceOnUse#39;) x="masque de coupe (valeur par défaut :-10％) y="masque de coupe (valeur par défaut :-10％) width="masque de coupe (par défaut :120％）" height="masque de coupe (par défaut :120％）" |
| metadata | Spécifier les métadonnées | |
| missing-glyph | ||
| mpath | ||
| <path> | Définir un chemin | d="définir les instructions de chemin" pathLength="si présent, le chemin est mis à l'échelle pour calculer la longueur du chemin équivalente à cette valeur" transform="liste de transformations" + Propriétés manifestes: Couleur, Remplissage, Graphics, Markers |
| <pattern> | Définir les coordonnées, la taille de la vue que vous souhaitez afficher et la taille de la vue. Ensuite, ajoutez cette forme à votre modèle. Lorsque le modèle est touché, la répétition de la bordure de la boîte de visualisation (portée visible) | id="ID unique utilisé pour faire référence à ce modèle" obligatoire. patternUnits="userSpaceOnUse' ou'objectBoundingBox". La deuxième valeur X, Y, width, height utilise une petite partie de la bordure de l'objet modèle, en unités (%)." patternContentUnits="'userSpaceOnUse#39; ou 'objectBoundingBox#39;" patternTransform="permet de transformer l'expression entière" x="décalage du modèle, à partir du coin supérieur gauche (par défaut 0)" y="décalage du modèle, à partir du coin supérieur gauche (par défaut 0)" width="largeur du tiling du modèle (par défaut100％）" height="hauteur du tiling du modèle (par défaut100％）" viewBox="les points" voir cette zone de dessin SVG. Séparés par des espaces ou des virgules4une valeur.(min x, min y, width, height)" xlink:href="Un autre schéma, dont les valeurs d'attribut sont par défaut et que toute sous-classe peut hériter. Recursive" |
| <polygon> | Définir un graphique composé d'au moins trois côtés | points="Points du polygone. Le nombre de points doit être pair". Obligatoire. fill-rule="Partie de l'attribut FillStroke pour la démonstration" + Propriétés manifestes: Couleur, Remplissage, Graphics, Markers |
| <polyline> | Définir une forme composée uniquement de lignes | points="Points sur la ligne. Le nombre de points doit être pair". Obligatoire. + Propriétés manifestes: Couleur, Remplissage, Graphics, Markers |
| <radialGradient> | Définir une dégradation radiale. Une dégradation radiale crée un cercle | gradientUnits="#39;userSpaceOnUse#39; ou 'objectBoundingBox#39. Utilisez le cadre de vue ou l'objet pour déterminer les points vectoriels de position relative. (par défaut de #39;objectBoundingBox" gradientTransform="Transformation applicable à la dégradation" cx="Centre de la dégradation (numérique ou % - 50% est par défaut) cy="Centre de la dégradation. (par défaut50％）" r="Rayon de la dégradation. (par défaut50％）" fx="Focus de la dégradation. (par défaut 0%)" fy="Focus de la dégradation. (par défaut 0%)" spreadMethod="#39;pad#39; ou 'reflect#39; ou 'repeat#39;" xlink:href="Référence à une autre dégradation, dont les valeurs d'attribut sont utilisées par défaut. Recursive" |
| <rect> | Définir un rectangle | x="Axe X du coin supérieur gauche du rectangle" y="Axe Y du coin supérieur gauche du rectangle" rx="Rayon de la radius X (élément round))" ry="Rayon de la radius Y (élément round))" width="Largeur du rectangle". Obligatoire. height="Hauteur du rectangle". Obligatoire. + Propriétés manifestes: Couleur, Remplissage, Graphics |
| script | Conteneur de script (par exemple ECMAScript) | |
| set | Définir une valeur d'attribut pour une période spécifique | |
| <stop> | Arrêt de la dégradation | offset="Décalage du stop (de 0 à1/0% à100%)
Voir stop-color="Couleur de ce stop" stop-opacity="Opacité de ce Stop (de 0 à1)" |
| style | Permet d'embedder directement une feuille de style dans le contenu SVG | |
| <svg> | Créer un fragment de document SVG | x="Embedding en haut à gauche (par défaut 0) y="Embedding en haut à gauche (par défaut 0) width="Largeur du fragment SVG (par défaut)100％）" height="hauteur du fragment SVG (par défaut de100％）" viewBox="point"seen" cette zone de dessin SVG. Séparés par des espaces ou des virgules4valeurs. (min x, min y, largeur, hauteur)" preserveAspectRatio="'none' ou n'importe quel'xVALYVAL' du9combinations, VAL est "min", "mid" ou "max". (par défaut none)" zoomAndPan="'magnify' ou 'disable'.L'option Magnify permet à l'utilisateur de déplacer et de zoomer sur votre fichier (par défaut Magnify )" xml="Le plus haut niveau de l'élément <svg> doit installer SVG et son espace de noms : xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + Propriétés manifestes: All |
| switch | ||
| symbol | ||
| <text> | définir un texte | x="position de l'axe X de la liste -position de l'axe. Dans le texte, la position du n-ième caractère est au n-ième x. Si il y a des caractères supplémentaires après, ils sont placés après la dernière position du dernier caractère. 0 est la valeur par défaut" y="position de l'axe Y de la liste. (Référence x) 0 est la valeur par défaut" dx="mouvement absolu par rapport au dernier symbole dessiné dans la liste de longueur du caractère. (Référence x)" dy="mouvement absolu par rapport au dernier symbole dessiné dans la liste de longueur du caractère. (Référence x)" rotate="liste de rotation. La rotation du n-ième est le n-ième caractère. Les caractères supplémentaires ne sont pas fournis avec la valeur de rotation finale" textLength="Le visualisateur SVG tentera d'afficher l'espacement entre les textes/ou la longueur cible de l'ajustement des glyphes du texte. (par défaut : la longueur du texte normal)" lengthAdjust="informe le visualisateur de tenter de s'ajuster si une longueur spécifiée est définie pour présenter le texte. Ces deux valeurs sont'spacing' et'spacingAndGlyphs'" + Propriétés manifestes: Couleur, Remplissage et Trace, Graphiques, Spécification de police, Éléments de contenu texte |
| textPath | ||
| title | description de texte brute d'un élément dans SVG - ne fait pas partie de la partie graphique à afficher. L'agent utilisateur l'affichera sous forme de tooltip | |
| <tref> | référence tout élément <text> d'un document SVG et réutilisation | l'élément <TEXT> identique |
| <tspan> | L'élément est identique à <text>, mais il peut inclure des balises de texte en interne ainsi que le texte lui-même | Identique à l'élément <text> + de plus: xlink:href="référence à un élément <TEXT>" |
| <use> | Utilisez une référence URI pour un <G>, <svg> ou tout autre élément graphique avec un attribut ID unique et des éléments graphiques répétés. La copie est l'élément original, donc l'original dans le fichier n'est qu'une référence. Toute modification de l'original affecte toutes les copies. | x="axe X du coin supérieur gauche de l'élément cloné" y="axe Y du coin supérieur gauche de l'élément cloné" width="largeur de l'élément cloné" height="hauteur de l'élément cloné" xlink:href="URI de référence de l'élément cloné" + Propriétés manifestes: All |
| view | ||
| vkern |