Gli ultimi tutorial di sviluppo web
 

SVG Riferimento


SVG Elementi

Elemento Descrizione attributi
<a> Crea un collegamento intorno elementi SVG xlink:show
xlink:actuate
xlink:href
target
<altGlyph> Consente di controllare i glifi usati per rendere particolare i dati di carattere x
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef> Definisce un set di sostituzione per i glifi id
<altGlyphItem> Definisce una serie di sostituzioni candidato glifi id
<animate> Definisce come un attributo di un elemento cambia nel 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> Causa un elemento di riferimento per muoversi lungo un percorso di 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 un attributo di trasformazione su un elemento di destinazione, consentendo in tal modo di controllare le animazioni di traduzione, ridimensionamento, rotazione e / o inclinazione 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> Definisce un cerchio 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 è di nascondere ciò che di norma dovrebbero essere disegnato. Lo stencil che definisce ciò che è e ciò che non è disegnato che viene chiamato un tracciato di ritaglio 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> Specifica una descrizione del profilo di colore (quando il documento è in stile con i 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> Definisce un cursore personalizzato indipendente dalla piattaforma 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 contenitore per gli elementi di riferimento  
<desc> Una descrizione di solo testo per gli elementi contenitori o elementi grafici in formato SVG (gli interpreti possono visualizzare il testo come un tooltip)  
<ellipse> Definisce un'ellisse 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> Compone due oggetti insieme secondo un certo metodo di fusione 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. Applica una trasformazione di matrice  
feComponentTransfer Filtro SVG. Esegue rimappatura componente-saggio dei dati  
feComposite Filtro SVG.  
feConvolveMatrix Filtro SVG.  
feDiffuseLighting Filtro SVG.  
feDisplacementMap Filtro SVG.  
feDistantLight Filtro SVG. Definisce una sorgente di luce  
feFlood Filtro SVG.  
feFuncA Filtro SVG. Sotto-elemento a feComponentTransfer  
feFuncB Filtro SVG. Sotto-elemento a feComponentTransfer  
feFuncG Filtro SVG. Sotto-elemento a feComponentTransfer  
feFuncR Filtro SVG. Sotto-elemento a feComponentTransfer  
feGaussianBlur Filtro SVG. Esegue una sfocatura gaussiana sull'immagine  
feImage Filtro SVG.  
feMerge Filtro SVG. Crea livelli immagine su uno sopra l'altro  
feMergeNode Filtro SVG. Sotto-elemento a feMerge  
feMorphology Filtro SVG. Esegue un "fattening" o "thinning" su un grafico fonte  
feOffset Filtro SVG. Sposta un'immagine relativamente alla sua posizione corrente  
fePointLight Filtro SVG.  
feSpecularLighting Filtro SVG.  
feSpotLight Filtro SVG.  
feTile Filtro SVG.  
feTurbulence Filtro SVG.  
filter Contenitore per effetti filtro  
font Definisce un font  
font-face Descrive le caratteristiche di un font  
font-face-format 
font-face-name 
font-face-src 
font-face-uri 
foreignObject 
<g> Usato per raggruppare elementi id="the name of the group"
fill="the fill color for the group"
opacity="the opacity for the group"

+ presentation attributes:
All
glyph Definisce la grafica per un determinato glifo  
glyphRef Definisce una possibile glifo da usare  
hkern 
<image> Definisce un'immagine 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> Definisce una linea 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> Definisce una sfumatura lineare. gradienti lineari riempire l'oggetto utilizzando un vettore, e possono essere definiti come gradienti orizzontali, verticali o angolari. 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> I marcatori possono essere collocati sui vertici di linee, polilinee, poligoni e percorsi. Questi elementi possono utilizzare il marker attributi "marker-start" , "marker-mid" e "marcatore-end" ', che ereditano per difetto o può essere impostato su' none 'o l'URI di un marcatore definito. È necessario innanzitutto definire il marcatore prima che sia possibile fare riferimento a esso tramite il suo URI. Qualsiasi tipo di forma può essere messo dentro marcatore. Essi sono disegnati sulla sommità dell'elemento cui sono collegati 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> Mascheramento è una combinazione di valori di opacità e di ritaglio. Come clipping è possibile utilizzare forme, testo o percorsi per definire le sezioni della maschera. Lo stato di default di una maschera è completamente trasparente che è l'opposto del piano di taglio. La grafica in una maschera imposta come porzioni opache della maschera sono 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 Specifica metadati  
missing-glyph 
mpath 
<path> Definisce un percorso 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> Definisce le coordinate che si desidera la vista per mostrare e la dimensione della vista. Poi si aggiungono le forme nel vostro modello. Il modello si ripete quando un margine della vista casella (viewing area) viene colpita 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> Definisce un grafico che contiene almeno tre lati 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> Definisce qualsiasi forma che si compone di soli linee rette points="the points on the polyline". Required.

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<radialGradient> Definisce un gradiente radiale. gradienti radiali sono creati prendendo un cerchio e senza intoppi la modifica dei valori tra i cursori sfumatura dal punto di messa a fuoco il raggio esterno. 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> Definisce un rettangolo 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 Contenitore per gli script (eg, ECMAScript)  
set Imposta il valore di un attributo per una durata specificata  
<stop> Le fermate per un 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 Consente fogli di stile per essere incorporati direttamente all'interno di contenuti SVG  
<svg> Crea un frammento di 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> Definisce un testo 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 Una descrizione di solo testo per gli elementi in SVG - non viene visualizzato come parte della grafica. Gli interpreti possono visualizzare il testo come un tooltip  
<tref> Riferimenti qualsiasi <text> elemento nel documento SVG e riutilizzarlo Identical to the <text> element
<tspan> Identica alla <text> elemento, ma può essere nidificato all'interno tag di testo e al suo interno Identical to the <text> element
+ in addition:
xlink:href="Reference to a <text> element"
<use> Utilizza un URI fare riferimento a un <g>, <svg> elemento grafico o altro con un attributo ID univoco e replicarlo. La copia è solo un riferimento per l'originale in modo che solo esiste l'originale del documento. Qualsiasi modifica all'originale influisce su tutte le copie. 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