English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manuale di riferimento SVG

manuale di riferimento SVG raccoglie gli elementi comuni di SVG, i metodi di utilizzo degli attributi degli elementi, nonché i parametri di utilizzo dettagliati, le descrizioni descrittive ecc.

elemento SVG

elementodescrizioneproprietà
<a>creare un elemento SVG attorno al collegamentoxlink:show
xlink:actuate
xlink:href
target
<altGlyph>permettere all'oggetto di testo di controllare, per presentare dati di caratteri specialix
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef>definire una serie di sostituzioni di simboli di naturaid
<altGlyphItem>definire una serie di sostituzioni di simboli di naturaid
<animate>cambiamento dinamico delle proprietà nel tempoattributeName="nome dell'attributo di destinazione"
from="起始值"
to="结束值"
dur="durata"
repeatCount="quando si ripeterà l'animazione"
<animateColor>definire la trasformazione del colore nel tempoby="相对偏移值"
from="起始值"
to="结束值"
<animateMotion>movimento dell'elemento lungo il percorso dell'azionecalcMode="modalità di interpolazione dell'animazione. Può essere 'discreta', "lineare", "ritmato", "spline"
path="percorso di movimento"
keyPoints="la distanza che l'oggetto deve muoversi lungo il percorso di movimento al tempo corrente"
rotate="applica la trasformazione di rotazione"
xlink:href="un URI che riferisce all'elemento <path> che definisce il percorso di movimento"
<animateTransform>Un elemento di destinazione dell'animazione cambia le proprietà, il che consente di controllare lo spostamento, lo zoom, la rotazione o l'inclinazione dell'animazioneby="相对偏移值"
from="起始值"
to="结束值"
type="类型的转换其值是随时间变化。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'"
<circle>定义一个圆cx="圆的x轴坐标"
cy="圆的y轴坐标"
r="圆的半径". 必需.
+ 显现属性:颜色,FillStroke,图形
<clipPath>用于隐藏位于剪切路径以外的对象部分。定义绘制什么和什么不绘制的模具被称为剪切路径clip-path="引用剪贴路径和引用剪贴路径交叉"
clipPathUnits="userSpaceOnUse'或'objectBoundingBox"。第二个值childern一个对象的边框,会使用掩码的一小部分单位(默认:"userSpaceOnUse")"
<color-profile>指定颜色配置文件的说明(使用CSS样式文件时)local="本地存储颜色配置文件唯一ID"
name=""
rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric"
xlink:href="ICC配置文件资源URI"
<cursor>定义一个独立于平台的自定义光标x="x轴左上角光标(默认为0)"
y="y轴的左上角光标(默认为0)"
xlink:href="使用光标图像URI
<defs>引用的元素容器 
<desc>Descrizione del testo puro dell'elemento SVG - non viene visualizzato come parte del grafico. L'agente utente lo visualizzerà come tooltip 
<ellipse>定义一个椭圆cx="椭圆x轴坐标"
cy="椭圆y轴坐标"
rx="沿x轴椭圆形的半径"。必需。
ry="沿y轴长椭圆形的半径"。必需。
+ 显现属性:颜色,FillStroke,图形
<feBlend>使用不同的混合模式将两个对象合并在一起mode="图像混合模式:normal|multiply|screen|darken|lighten"
in="标识为给定的滤镜原始输入:SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
in2="operazione di mescolamento dell'immagine di input secondario"
feColorMatrixFiltro SVG. Applica una trasformazione matriciale 
feComponentTransferFiltro SVG. Esegui una rimappatura component-wise dei dati 
feCompositeFiltro SVG 
feConvolveMatrixFiltro SVG 
feDiffuseLightingFiltro SVG 
feDisplacementMapFiltro SVG 
feDistantLightFiltro SVG. Definizione di una sorgente di luce 
feFloodFiltro SVG 
feFuncAFiltro SVG. Elemento figlio di feComponentTransfer 
feFuncBFiltro SVG. Elemento figlio di feComponentTransfer 
feFuncGFiltro SVG. Elemento figlio di feComponentTransfer 
feFuncRFiltro SVG. Elemento figlio di feComponentTransfer 
feGaussianBlurFiltro SVG. Esegui un'effusione gaussiana sull'immagine 
feImageFiltro SVG. 
feMergeFiltro SVG. Costruito sugli strati di immagini sovrapposti 
feMergeNodeFiltro SVG. Elemento figlio di feMerge 
feMorphologyFiltro SVG. Esegui "fattening" o "thinning" sul grafico di origine 
feOffsetFiltro SVG. Sposta l'immagine rispetto alla sua posizione corrente 
fePointLightFiltro SVG 
feSpecularLightingFiltro SVG 
feSpotLightFiltro SVG 
feTileFiltro SVG 
feTurbulenceFiltro SVG 
filterContenitore per l'effetto di filtro 
font                Definizione del tipo di carattere 
font-faceDescrizione delle caratteristiche di un tipo di carattere 
font-face-format  
font-face-name  
font-face-src  
font-face-uri  
foreignObject  
<g>Elemento contenitore utilizzato per combinare elementi correlatiid="nome del gruppo"
fill="colore di riempimento del gruppo"
opacity="opacità del gruppo"
+ Proprietà di visibilità:
All
glyphDefinizione del grafico per il simbolo pittografico specificato 
glyphRefDefinizione dei simboli pittografici possibili da utilizzare 
hkern  
<image>Definizione dell'immaginex="coordinata x dell'angolo superiore sinistro dell'immagine"
y="coordinata y dell'angolo superiore sinistro dell'immagine"
width="larghezza dell'immagine". Obbligatorio.
height="altezza dell'immagine". Obbligatorio.
xlink:href="path dell'immagine". Obbligatorio.
+ Proprietà di visibilità:
Colori, Grafica, Immagini, Viste
<line>Definire una lineax1="coordinata x dell'inizio della linea"
y1="coordinata y dell'inizio della linea"
x2="coordinata x della fine della linea"
y2="coordinata y della fine della linea"
+ Proprietà di visibilità:
Colore, riempimento tracciamento, Grafica, Marcatori
<linearGradient>Definire un degradato lineare. Utilizzando il riempimento del degradato vettoriale lineare dell'oggetto, può essere definito come degradato orizzontale, verticale o angolare.id="id l'attributo può definire un nome unico per il degradato. L'uso deve essere"
gradientUnits="'userSpaceOnUse' o 'objectBoundingBox'. Usa la cornice di vista o l'oggetto per determinare i punti vettoriali di posizione relativi. (predefinito 'objectBoundingBox')"
gradientTransform="trasformazione applicabile al degradato"
x1="punto di partenza della direzione x del degradato (predefinito 0%)"
y1="punto di partenza della direzione y del degradato (predefinito 0%)"
x2="punto di arrivo della direzione x del degradato. (predefinito 100%)"
y2="punto di arrivo della direzione y del degradato. (predefinito 0%)"
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="riferimento a un altro degradato il cui valori degli attributi vengono utilizzati come include defaults and stops. Recursive
<marker>Il marcatore può essere messo nei vertici di linee, curve, poligoni e percorsi. Questi elementi possono utilizzare le proprietà "marker-start", "marker-mid" e "marker-end" dell'attributo marker, che possono essere ereditati di default o impostati su "none" o l'URI del marcatore definito. È necessario definire il marcatore prima di poterlo referenziare tramite il suo URI. Qualsiasi forma può avere il marcatore all'interno. Li mettono in alto quando disegnano gli elementimarkerUnits="strokeWidth' o 'userSpaceOnUse'. Se è "strokeWidth", utilizza un'unità uguale alla larghezza di una traccia. Altrimenti, la scala del marcatore non utilizzerà la stessa unità di vista come elemento di riferimento (predefinito 'strokeWidth')"
refx="posizione di connessione del vertice del marcatore (predefinito 0)"
refy="posizione di connessione del vertice del marcatore (predefinito 0)"
orient="'auto' mostra sempre l'angolo del marcatore. "auto" calcola un angolo tale che il tangente di un vertice dell'asse X (predefinito 0)
markerWidth="larghezza del marcatore (predefinito 3)"
markerHeight="l'altezza del marcatore (predefinito 3)"
vedere "area di disegno SVG" da "ogni punto". Quattro valori separati da spazi o virgole (min x, min y, larghezza, altezza)"
+ attributi di presentazione:
All
<mask>La maschera di protezione è una combinazione di valori di opacità e tagliatura. Come la tagliatura, puoi utilizzare grafica, testo o percorso per definire la parte della maschera. Lo stato predefinito di una maschera è completamente trasparente, ossia opposto alla superficie di tagliatura. Nella configurazione grafica della maschera, imposta la parte opaca della mascheramaskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Determina se la maschera di tagliatura è relativa a una finestra completa o a un oggetto (predefinito: 'objectBoundingBox')"
maskContentUnits="l'uso del secondo maschera relativa alla posizione grafica dell'oggetto in percentuale'userSpaceOnUse'o'objectBoundingBox'(predefinito: 'userSpaceOnUse')"
x="maschera di tagliatura (valore predefinito: -10%)"
y="maschera di tagliatura (valore predefinito: -10%)"
larghezza="maschera di tagliatura (predefinito: 120%)"
altezza="maschera di tagliatura (predefinito: 120%)"
metadataSpecificare i metadati 
missing-glyph  
mpath  
<path>Definisci un percorsod="definisci istruzioni di percorso"
pathLength="se presente, l'oggetto percorso viene ridotto per calcolare la lunghezza del percorso equivalente a questo valore"
transform="elenco di trasformazioni"
+ Proprietà di visibilità:
Colore, riempimento tracciamento, Grafica, Marcatori
<pattern>Definisci le coordinate, la vista desiderata e la dimensione della vista. Poi aggiungili alla tua forma modello. Quando il modello colpisce, la vista si ripete ai margini della cornice della vista (visibile)id="ID unico utilizzato per riferirsi a questo modello. Obbligatorio."
patternUnits="userSpaceOnUse' o 'objectBoundingBox". Il secondo valore X, Y, larghezza, altezza utilizza una piccola parte del perimetro dell'oggetto modello, unità (%)"
patternContentUnits="'userSpaceOnUse' o 'objectBoundingBox'"
patternTransform="permette la trasformazione dell'intera espressione"
x="offset del modello, partendo dall'angolo in alto a sinistra (predefinito 0)"
y="offset del modello, partendo dall'angolo in alto a sinistra (predefinito 0)"
larghezza="larghezza della tassellazione del modello (predefinito 100%)"
altezza="altezza della tassellazione del modello (predefinito 100%)"
vedere "area di disegno SVG" da "ogni punto". Quattro valori separati da spazi o virgole (min x, min y, larghezza, altezza)"
xlink:href="Un altro schema, i valori degli attributi come valore predefinito e qualsiasi sottoclasse può ereditare. Ricorsivo"
 
<polygon>Definire un grafico con almeno tre latipoints="Punti del poligono. Il numero di punti deve essere dispari". Obbligatorio.
fill-rule="Proprietà dimostrativa di FillStroke"
+ Proprietà di visibilità:
Colore, riempimento tracciamento, Grafica, Marcatori
<polyline>Definire una forma composta solo da lineepoints="Punti sulla linea. Obbligatorio.
+ Proprietà di visibilità:
Colore, riempimento tracciamento, Grafica, Marcatori
<radialGradient>Definire una progressione radiante. La progressione radiante crea un cerchiogradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Usa la casella di visualizzazione o l'oggetto per determinare i punti vettoriali di posizione relativi. (predefinito 'objectBoundingBox')"
gradientTransform="Trasformazione applicata alla progressione"
cx="Punto centrale (numero o % - 50% è predefinito)
cy="Punto centrale della progressione. (predefinito 50%)
r="Raggio della progressione. (predefinito 50%)
fx="Punto di foco della progressione. (predefinito 0%)
fy="Punto di foco della progressione. (predefinito 0%)
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="Riferimento a un'altra progressione, i valori degli attributi come valore predefinito. Ricorsivo"
<rect>Definire un rettangolox="Asse x dell'angolo in alto a sinistra del rettangolo"
y="Asse y dell'angolo in alto a sinistra del rettangolo"
rx="Raggio dell'asse x (elemento rotondo")
ry="Raggio dell'asse y (elemento rotondo")
width="Larghezza del rettangolo". Obbligatorio.
height="Altezza del rettangolo". Obbligatorio.
+ Proprietà di visibilità:
Colore, riempimento tracciamento, Grafica
scriptContenitore script (ad esempio ECMAScript) 
setImpostare un valore di attributo specifico per il tempo 
<stop>Stop della progressioneoffset="Offset della stop (da 0 a 1/da 0% a 100%). Riferimento
stop-color="Colore di questo stop"
stop-opacity="Opacità di questo Stop (da 0 a 1)
stylePermette di incorporare direttamente uno stile in un contenuto SVG 
<svg>Creare un segmento di documento SVGx="Inserimento in alto a sinistra (predefinito a 0")
y="Inserimento in alto a sinistra (predefinito a 0")
width="Larghezza del segmento SVG (predefinito al 100%")
height="Altezza del segmento SVG (predefinito al 100%)"
viewBox="Punto 'seen' della regione di disegno SVG. Quattro valori separati da spazi o virgole. (min x, min y, larghezza, altezza)"
preserveAspectRatio="'none' o qualsiasi combinazione delle 9 'xVALYVAL', VAL è 'min', 'mid' o 'max'. (Predefinito: none)"
zoomAndPan="'magnify' o 'disable'. L'opzione Magnify permette agli utenti di spostarsi e zoomare il tuo file (predefinito Magnify )"
xml="Tutti gli elementi esterni <svg> devono avere SVG e il suo spazio dei nomi: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""
+ Proprietà di visibilità:
All
switch  
symbol  
<text>Definire un testox="Posizione sull'asse X dell'elenco. Nella testo, la posizione del n-esimo carattere è nel n-esimo punto dell'asse X. Se ci sono caratteri aggiuntivi, vengono posizionati dopo l'ultimo carattere. 0 è il valore predefinito"
y="Posizione sull'asse Y dell'elenco. 0 è il valore predefinito"
dx="Posizione assoluta relativamente all'ultimo simbolo disegnato nel elenco di lunghezze dei caratteri. (Riferimento a x)"
dy="Posizione assoluta relativamente all'ultimo simbolo disegnato nel elenco di lunghezze dei caratteri. (Riferimento a x)"
rotate="Elenco di rotazioni. La rotazione del n-esimo è il n-esimo carattere. I caratteri aggiuntivi non forniscono il valore di rotazione finale"
textLength="Il visualizzatore SVG tenterà di visualizzare la lunghezza tra i testi / o la lunghezza del testo target dell'adattamento dei glifi. (Predefinito: lunghezza del testo normale)"
lengthAdjust="Informare il visualizzatore di cercare di adattare la lunghezza specificata per visualizzare il testo. Questi valori sono 'spacing' e 'spacingAndGlyphs'"
+ Proprietà di visibilità:
Colore, Riempimento e Traccia, Grafica, Specifica del Font, Elementi di Contenuto del Testo
textPath  
titleDescrizione del testo puro dell'elemento SVG - non viene visualizzato come parte del grafico. L'agente utente lo visualizzerà come tooltip 
<tref>Riferimento a qualsiasi elemento <text> del documento SVG e riutilizzoL'elemento <TEXT> identico
<tspan>L'elemento è equivalente a <text>, ma può includere tag di testo all'interno e all'interno stessoIdentico all'elemento <text>
+ In aggiunta:
xlink:href="Riferimento a un elemento <TEXT>"
<use>Utilizzare un URI per referenziare un <G>, <svg> o qualsiasi altro elemento con un attributo ID unico e elementi grafici ripetuti. La copia è l'elemento originale, quindi l'esistenza originale nel file è solo una riferimento. Le modifiche originali influenzano tutte le copie.x="Ordinata dell'angolo superiore sinistro dell'elemento clonato"
y="Ascissa dell'angolo superiore sinistro dell'elemento clonato"
width="Larghezza dell'elemento clonato"
height="Altezza dell'elemento clonato"
xlink:href="URI di riferimento per clonare l'elemento"
+ Proprietà di visibilità:
All
view  
vkern