SVG Elements
| Élément | La description | Les attributs |
|---|---|---|
| <a> | Crée un lien autour des éléments SVG | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | Fournit un contrôle sur les glyphes utilisés pour rendre notamment les données de caractère | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | Définit un ensemble de substitution pour les glyphes | id |
| <altGlyphItem> | Définit un ensemble de substitutions de glyphes candidat | id |
| <animate> | Définit comment un attribut d'un élément change au fil du temps | 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> | Provoque un élément appelé à se déplacer le long d'une trajectoire de mouvement | 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> | Anime un attribut de transformation sur un élément cible, ce qui permet de contrôler les animations translation, mise à l'échelle, la rotation et / ou de l'inclinaison | 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> | Définit un cercle | 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 est de cacher ce qui serait normalement établi. Le pochoir qui définit ce qui est et ce qui est pas tiré est appelé un chemin de détourage | 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> | Indique une description de profil de couleur (lorsque le document est de style en utilisant le 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> | Définit un curseur personnalisé indépendant de la plateforme | 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> | Un conteneur pour les éléments référencés | |
| <desc> | Une description de texte pour les éléments conteneurs ou des éléments graphiques dans SVG (agents utilisateurs peuvent afficher le texte sous forme d'infobulle) | |
| <ellipse> | Définit une ellipse | 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> | Compose deux objets ensemble selon un certain mode de fusion | 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 | filtre SVG. Applique une transformation de matrice | |
| feComponentTransfer | filtre SVG. Effectue composante sage remappage des données | |
| 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. Sous-élément feComponentTransfer | |
| feFuncB | filtre SVG. Sous-élément feComponentTransfer | |
| feFuncG | filtre SVG. Sous-élément feComponentTransfer | |
| feFuncR | filtre SVG. Sous-élément feComponentTransfer | |
| feGaussianBlur | filtre SVG. Effectue un flou gaussien sur l'image | |
| feImage | filtre SVG. | |
| feMerge | filtre SVG. Crée des couches d'images les uns sur les autres | |
| feMergeNode | filtre SVG. Sous-élément feMerge | |
| feMorphology | filtre SVG. Effectue un "fattening" ou "thinning" sur un graphique source | |
| feOffset | filtre SVG. Déplace une image par rapport à sa position actuelle | |
| fePointLight | filtre SVG. | |
| feSpecularLighting | filtre SVG. | |
| feSpotLight | filtre SVG. | |
| feTile | filtre SVG. | |
| feTurbulence | filtre SVG. | |
| filter | Conteneurs effets de filtre | |
| font | Définit une police | |
| font-face | Décrit les caractéristiques d'une police | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | Utilisé pour regrouper des éléments | id="the name of the group" fill="the fill color for the group" opacity="the opacity for the group" + presentation attributes: All |
| glyph | Définit les graphiques pour un glyphe donné | |
| glyphRef | Définit un glyphe possible d'utiliser | |
| hkern | ||
| <image> | Définit une image | 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> | Définit une ligne | 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> | Définit un dégradé linéaire. Des gradients linéaires de remplissage de l'objet à l'aide d'un vecteur, et peuvent être définis comme des gradients horizontal, vertical ou oblique. | 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> | Les marqueurs peuvent être placés sur les sommets des lignes, des polylignes, des polygones et des chemins. Ces éléments peuvent utiliser le marker attributs "marker-start" , "marker-mid" et "marker-end" 'qui héritent par défaut ou peut être réglé sur «aucun» ou l'URI d'un marqueur défini. Vous devez d'abord définir le marqueur avant de pouvoir le référencer via son URI. Tout type de forme peut être mis à l'intérieur marqueur. Ils sont tirés au-dessus de l'élément ils sont fixés | 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 est une combinaison de valeurs d'opacité et d'écrêtage. Comme l'écrêtage vous pouvez utiliser des formes, du texte ou des chemins pour définir les sections du masque. L'état d'un masque par défaut est totalement transparent qui est à l'opposé de plan de clipping. Les graphiques dans un masque définit la façon dont les parties opaques du masque sont | 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 | Indique les métadonnées | |
| missing-glyph | ||
| mpath | ||
| <path> | Définit un chemin | 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> | Définit les coordonnées que vous voulez la vue de montrer et la taille de la vue. Ensuite, vous ajoutez des formes dans votre modèle. Le motif se répète quand un bord de la vue boîte (viewing area) d' (viewing area) est touché | 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> | Définit un graphique qui contient au moins trois côtés | 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> | Définit toute forme qui se compose de seulement des lignes droites | points="the points on the polyline". Required. + presentation attributes: Color, FillStroke, Graphics, Markers |
| <radialGradient> | Définit un dégradé radial. Les dégradés radiaux sont créés en prenant un cercle et en douceur l'évolution des valeurs entre les arrêts de gradient du point du rayon extérieur de mise au point. | 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> | Définit un rectangle | 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 | Conteneur pour les scripts (eg, ECMAScript) | |
| set | Définit la valeur d'un attribut pour une durée déterminée | |
| <stop> | Les arrêts pour un gradient | 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 | Permet feuilles de style pour être intégrés directement dans le contenu SVG | |
| <svg> | Crée un fragment de document 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> | Définit un texte | 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 | Une description de texte pour les éléments SVG - pas affiché dans le cadre des graphiques. Les agents utilisateurs peuvent afficher le texte sous forme d'infobulle | |
| <tref> | Références tout <text> élément dans le document SVG et réutiliser | Identical to the <text> element |
| <tspan> | Identique au <text> élément mais peut être imbriqué dans des balises de texte et à l' intérieur lui-même | Identical to the <text> element + in addition: xlink:href="Reference to a <text> element" |
| <use> | Utilise un URI pour référencer un <g>, <svg> ou tout autre élément graphique avec un attribut id unique et de le reproduire. La copie est seulement une référence à l'original de sorte que l'original existe dans le document. Toute modification de l'original affecte toutes les copies. | 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 |