Latest web development tutorials

SVG Manuale di riferimento

elemento SVG

elemento spiegazione proprietà
<a> Creare un collegamento intorno elemento SVG xlink: spettacolo
xlink: actuate
xlink: href
bersaglio
<AltGlyph> Consente a un oggetto del testo di controllo per il rendering dei dati di carattere speciale x
y
dx
dy
ruotare
glyphRef
formato
xlink: href
<AltGlyphDef> Essa è definita come una serie di simboli per sostituire id
<AltGlyphItem> Sostituire la definizione di una serie di simboli come candidato id
<Animate> Dinamicamente modificare le proprietà nel tempo attributeName = "nome attributo target"
da = "valore iniziale"
a = "valore finale"
dur = "Durata"
"Si verificherà l'animazione del tempo." RepeatCount =
<AnimateColor> Nel tempo, la definizione della conversione del colore by = "valore di offset relativo"
da = "valore iniziale"
a = "valore finale"
<AnimateMotion> Così che l'elemento si sposta lungo il percorso di movimento calc vel = "modalità di animazione interpolazione può essere 'discreto', 'lineari', 'ritmo', 'spline'"
path = "percorso di movimento"
keypoints = "lungo il percorso di movimento dell'oggetto del tempo presente devono essere spostati aria."
ruotare = "applicare una trasformazione di rotazione."
xlink: href = "URI fa riferimento a un <percorso> elemento che definisce il tracciato del movimento."
<AnimateTransform> Animazione elemento di destinazione trasformare una proprietà, rendendo il controllo di animazione pan, zoom, ruotare o inclinare by = "valore di offset relativo"
da = "valore iniziale"
a = "valore finale"
type = "tipo convertito il cui variazioni di valore nel tempo può essere 'tradurre', 'scala', 'rotazione', 'skewX', 'skewY'"
<Circle> La definizione di un cerchio cx = "x coordinata asse del cerchio."
cy = "y coordinata del cerchio."
r = "raggio del cerchio." richiesti.

+ Mostra attributi: colore, FillStroke, grafica
<ClipPath> Utilizzato per nascondere gli oggetti situati al di fuori della porzione di tracciato di ritaglio. Disegno e ciò che non definisce quello che viene chiamato il disegno tracciato di ritaglio stampo clip-path = "riferimenti e riferimenti tracciati di ritaglio clipping path croce".
clipPathUnits = "userSpaceOnUse 'o' objectBoundingBox". Il secondo valore confine childern di un oggetto, usando una piccola porzione di unità maschera (default: "userSpaceOnUse") "
<Color-profilo> Descrizione specificato profilo di colore (quando si utilizza file di stile CSS) locale = "profilo colore memorizzato localmente ID unico"
name = ""
il rendering intento = "auto | percettivo | parente-colorimetrico | saturazione | assoluto-colorimetrico"
xlink: href = "profilo ICC risorsa URI"
<Cursore> Definire un cursore personalizzato indipendente dalla piattaforma x = "asse x in alto a sinistra del cursore (il valore predefinito è 0)."
y = "asse y dell'angolo in alto a sinistra del cursore (il valore predefinito è 0)."
xlink: href = "Usa l'immagine del cursore URI
<Defs> elemento di riferimento Container
<Desc> elementi puri in SVG descrizione del testo - non come parte della grafica da visualizzare. Gli interpreti possono visualizzare come tooltip
<Ellisse> La definizione di un ellisse cx = "asse x ovale punto"
cy "coordinata asse y ovale" =
rx = "lungo l'asse x del raggio dell'ellisse." Richiesto.
ry = "oblunga lungo il raggio dell'asse y." Richiesto.

+ Mostra attributi: colore, FillStroke, grafica
<FeBlend> Utilizzando diversi metodi di fusione alla sintesi di due oggetti insieme mode = "metodi di fusione di immagine: normale | moltiplicare | schermo | scurire | alleggerire"
a = "identificato come ingresso grezzo determinato filtro: SourceGraphic | SourceAlpha | BackgroundImage | backgroundAlpha | FillPaint | StrokePaint | <filter-primitivo-reference>"
in2 = "seconda miscelazione operazione di immagine di ingresso."
feColorMatrix Filtro SVG. Adatto trasformazione di matrice
feComponentTransfer Filtro SVG. componente-saggio Data Execution rimappatura
feComposite Filtri SVG
feConvolveMatrix Filtri SVG
feDiffuseLighting Filtri SVG
feDisplacementMap Filtri SVG
feDistantLight Filtro SVG. La definizione di una sorgente luminosa
feFlood Filtri SVG
feFuncA Filtro SVG. elementi figlio feComponentTransfer
feFuncB Filtro SVG. elementi figlio feComponentTransfer
feFuncG Filtro SVG. elementi figlio feComponentTransfer
feFuncR Filtro SVG. elementi figlio feComponentTransfer
feGaussianBlur Filtro SVG. immagine sfocatura gaussiana esecutivo
feImage Filtro SVG.
feMerge Filtro SVG. Costruito sulla parte superiore di ogni altro livello di immagine
feMergeNode Filtro SVG. elementi figlio feMerge
feMorphology Filtro SVG. L'attuazione di "ingrasso" o "diradamento" Graphics di origine
feOffset Filtro SVG. Relativa alla sua attuale posizione di un'immagine in movimento
fePointLight Filtri SVG
feSpecularLighting Filtri SVG
feSpotLight Filtri SVG
feTile Filtri SVG
feTurbulence Filtri SVG
filtro effetti filtro Contenitore
fonte font personalizzati
font-face Descrivere le caratteristiche di un font
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
<G> elemento contenitore per la combinazione di elementi correlati id = "nome del gruppo."
riempire = "colore di riempimento del gruppo."
Opacità = "L'opacità gruppo"

+ Mostra proprietà:
tutto
glifo Per un dato grafica geroglifico personalizzati
glyphRef Definizione pittogramma può essere usato
hkern
<Immagine> Immagine personalizzata x = "x-asse coordinate dell'angolo in alto a sinistra dell'immagine."
"Coordinata asse y dell'angolo in alto a sinistra dell'immagine." Y =
width = "larghezza dell'immagine." must.
height = "altezza dell'immagine." must.
XLink :. href = "percorso di immagine" must.

+ Mostra proprietà:
Colori, grafica, immagini, Finestre
<Linea> Definire una linea x1 = "x-coordinata del punto di partenza di una linea retta."
y1 = "y coordinate del punto iniziale di una linea retta."
x2 = "x-coordinate del punto finale linea retta."
Y2 = "coordinata y del punto finale linea retta."

+ Mostra proprietà:
Colore, FillStroke, grafica, marcatori
<LinearGradient> Definire una sfumatura lineare. Utilizzando un gradiente lineare riempire gli oggetti vettoriali, e può essere definito come gradiente orizzontale, verticale o ad angolo. id = "attributo id può definire un nome univoco per la sfumatura. riferimenti deve"
gradientUnits = " 'userSpaceOnUse' o 'objectBoundingBox'. Utilizzare la casella di visualizzazione o l'oggetto per determinare il relativo punto vettore posizione. (default 'objectBoundingBox)"
gradientTransform = "si applica a cambiare il gradiente"
x1 = "x gradiente vettore punto di partenza (default 0%)"
Y1 = "y punto di partenza del gradiente vettore (default 0%)"
x2 = "alla fine del vettore gradiente x. (default 100%)"
y2 = "alla fine del vettore gradiente y. (default 0%)"
spreadMethod = " 'pad' o 'riflettere' o 'repeat'"
xlink: href = "riferimento ad un altro gradiente cui valori attributo vengono utilizzati come default e soste comprese ricorsivo".
<Marker> Tag può essere posizionato sul vertice linee, polilinee, poligoni e percorsi. Questi elementi possono essere usati maeker proprietà "maeker-start", "maeker-metà" e "maeker-end", Eredita impostazione predefinita, o possono essere impostati per URI "none" o tag definiti. È necessario definire il tag prima che possa essere riferimento il URI. Qualsiasi tipo di forma, si può mettere i tag al suo interno. Quando traggono gli elementi per il fissaggio alla parte superiore markerUnits = "strokeWidth 'o' userSpaceOnUse". Se strokeWidth "allora l'uso di un'unità è uguale alla larghezza di un ictus. Altrimenti, non utilizzare la stessa vista tag scala dell'apparecchio come un elemento di riferimento (default 'strokeWidth')"
reFX = "connessioni tra i vertici posto marcatori (il valore predefinito è 0)."
refy = "connessioni posto marcatore vertice (il valore predefinito è 0)."
orientare = ". 'auto' sempre visualizzazione del contrassegno dell'angolo" auto "sarà calcolato ad un angolo tale che l'asse X di tangente vertice (di default è 0)
markerWidth = "width marcato (default 3)."
markerHeight = "altezza marcato (default 3)."
viewBox = "punti" visto "questo file SVG di disegno. 4 valori separati da spazi o virgole. (min x, y min, larghezza, altezza)"

+ Presentazione attributi:
tutto
<Mask> La schermatura è una combinazione di un non-taglio e valori di trasparenza. Come ritaglio, è possibile utilizzare alcuni grafica, testo o percorso definito maschera. Lo stato di default di una maschera è completamente trasparente, che è l'opposto del piano di ritaglio. Nella parte opaca della mascherina del modello impostazioni della maschera maskUnits = ". 'userSpaceOnUse' o 'objectBoundingBox' impostare se piano di ritaglio è la finestra relativamente intatte o di un oggetto (di default: 'objectBoundingBox')"
maskContentUnits = "posizione relativa dell'oggetto secondo modello di maschera utilizzando le percentuali 'userSpaceOnUse' o 'objectBoundingBox' (default: 'userSpaceOnUse')"
x = "maschera piano di ritaglio (default: -10%)."
y = "maschera piano di ritaglio (default: -10%)."
width = "maschera piano di ritaglio (default: 120%)."
height = "maschera piano di ritaglio (default: 120%)."
metadati meta dati specificati
mancante-glifo
mpath
<Percorso> Definire un percorso D = "comando percorso definito"
PathLength = "Se c'è, il percorso sarà scalato per calcolare il valore punti equivalente alla lunghezza di questo percorso"
trasformare = "Lista di conversione"

+ Mostra proprietà:
Colore, FillStroke, grafica, marcatori
<Modello> DET, dimensione che si desidera visualizzare schermi e punti di vista. Quindi aggiungere alla vostra figura modalità. Questa situazione si ripete ha colpito il bordo della vista di dialogo (campo del visibile) id = "ID univoco utilizzato per fare riferimento a questo modello." necessaria.
patternUnits = "userSpaceOnUse 'o' objectBoundingBox". Il secondo valore X, Y, larghezza, modalità cornice altezza con una piccola porzione dell'oggetto, l'unità (%). "
patternContentUnits = " 'userSpaceOnUse' o 'objectBoundingBox'"
patternTransform = "permette l'intera espressione per convertire"
x = "modalità offset, dall'angolo in alto a sinistra (di default è 0)."
y = "modalità di compensato, dall'angolo in alto a sinistra (di default è 0)."
width = "width tegola modello (di default è 100%)."
height = "Altezza tegola modello (di default è 100%)."
viewBox = "punti" visto "questo file SVG di disegno. 4 valori separati da spazi o virgole. (min x, y min, larghezza, altezza)"
xlink: href = "Un altro modello, il valore della proprietà è il default e tutte le sottoclassi può ereditare la ricorsione."
<Poligono> Definisce un disegno contiene almeno tre lati punti = "punto del poligono. Il numero totale di punti devono essere ancora." Richiesto.
fill-regola = "sezione FillStroke attributo presentazione"

+ Mostra proprietà:
Colore, FillStroke, grafica, marcatori
<Polilinea> Definire qualsiasi forma solo linee rette punti polilinea = "punto". Richiesto.

+ Mostra proprietà:
Colore, FillStroke, grafica, marcatori
<RadialGradient> Definizione graduale radioattivo. Creare un cerchio gradiente radiale gradientUnits = " 'userSpaceOnUse' o 'objectBoundingBox'. Utilizzare la casella di visualizzazione o l'oggetto per determinare la posizione relativa dei punti di vettore. (L'impostazione predefinita è 'objectBoundingBox)"
gradientTransform = "si applica a trasformare gradienti"
cx = "punto centrale del gradiente (numeri o% - 50% è l'impostazione predefinita)."
cy = "punto centrale del gradiente. (default 50%)."
r = "Raggio graduale. (default 50%)."
fx = "punto focale del gradiente. (default 0%)"
fy = "punto focale del gradiente. (default 0%)"
spreadMethod = " 'pad' o 'riflettere' o 'repeat'"
xlink: href = "riferimento ad un altro gradiente il cui valore di proprietà come ricorsione di default."
<Rect> Definire un rettangolo x = "asse x in alto a sinistra del rettangolo."
y = "asse y dell'angolo superiore sinistro del rettangolo."
rx = "Raggio (elemento di turno) Asse X".
ry = "raggio del asse y (elemento turno)"
width = "larghezza del rettangolo." Richiesto.
height = "altezza del rettangolo." Richiesto.

+ Mostra proprietà:
Colore, FillStroke, grafica
copione contenitore di script. (Come ad esempio ECMAScript)
set L'impostazione di un valore di proprietà per il tempo specificato
<STOP> fermata Gradient offset = "Stop Offset (0-1 / 0% a 100%)." Reference
stop-color = "color questo stop"
stop-opacità = "Stop l'opacità della (0-1)."
stile I fogli di stile possono essere incorporati direttamente all'interno di contenuti SVG
<Svg> Crea un frammento di documento SVG x = "incastonato nell'angolo in alto a sinistra (di default è 0)."
y = "incastonato nell'angolo in alto a sinistra (di default è 0)."
width = "frammento SVG larghezza (il valore predefinito è 100%)."
height = "Altezza SVG frammento (il valore predefinito è 100%)."
Viewbox = "punti" visto "in questo disegno SVG. 4 valori separati da spazi o virgole. (min x, y min, larghezza, altezza)"
preserveAspectRatio = " 'none' o 'xVALYVAL' nove combinazioni, VAL è" min "," medio "o" max ". (nessuno di default)"
zoomAndPan = " 'ingrandimento' o 'opzione disable'.Magnify consente agli utenti di Pan e Zoom i file (di default) Magnify"
xml = "più esterno <svg> elemento e la sua necessità di installare SVG namespace: xmlns =" ​​http://www.w3.org/2000/svg~~number=plural "xmlns: xlink =" http: //www.w3. org / 1999 / xlink "xml: space =" preserve ""

+ Mostra proprietà:
tutto
interruttore
simbolo
<Text> Definire un testo x = "lista di X - .. La posizione dell'albero nel testo nella posizione dei primi n caratteri della asse x n-esimo se ci sono caratteri aggiuntivi dietro, esausto dopo l'ultima posizione del carattere posero 0 è il valore predefinito."
y = "posizione asse Y della lista. (vedere x) 0 è l'impostazione predefinita."
dx = "muoversi rispetto disegnata ultima glifo nella lunghezza della lista di caratteri nella posizione assoluta (vedere x)"
dy = "muoversi rispetto disegnata ultima glifo nella lunghezza della lista di caratteri nella posizione assoluta (vedere x)"
ruotare = "un elenco di rotazione della rotazione n-esimo dei primi n caratteri. caratteri aggiuntivi non ha dato un valore di centrifuga finale"
textLength = "SVG Viewer cercherà di mostrare la distanza tra il testo / font o regolare la lunghezza del testo di arrivo (default: normale lunghezza del testo)."
lengthAdjust = "dice lo spettatore, se si tenta di specificare la lunghezza regolata per il rendering del testo. Questi due valori sono 'spacing' e 'spacingAndGlyphs'"

+ Mostra proprietà:
Colore, FillStroke, grafica, FontSpecification, TextContentElements
textPath
titolo elementi puri in SVG descrizione del testo - non come parte della grafica da visualizzare. Gli interpreti possono visualizzare come tooltip
<Tref> Fare riferimento a qualsiasi documento in formato SVG <text> elemento e il riutilizzo Stesso <TESTO> elemento
<Tspan> Elemento equivalente al <text>, ma può essere nidificato all'interno del testo stesso e il marchio interna Identica alla elemento <text>
+ In aggiunta:
xlink: href = "riferimento ad un elemento <text>"
<Uso> riferimento URI utilizzando un <G>, <svg> o altra struttura dispone di un ID univoco e elementi grafici ripetuti. Copiare l'elemento originale, per cui la presenza del file originale è solo un riferimento. Originale colpire qualsiasi cambiamento in tutte le copie. x = "elemento superiore sinistro del clone asse x"
y = "in alto a sinistra asse y elemento clone"
width = "width clonazione elemento"
height = "Altezza elemento clonazione"
xlink: href = "URI elemento clonazione"

+ Mostra proprietà:
tutto
vista
vkern