SVG - Guida rapida
Cos'è SVG?
SVG, Scalable Vector Graphics è un linguaggio basato su XML per definire la grafica vettoriale.
SVG ha lo scopo di visualizzare immagini sul Web.
Essendo immagini vettoriali, l'immagine SVG non perde mai qualità, indipendentemente da come viene ingrandita o ridimensionata.
Le immagini SVG supportano l'interattività e l'animazione.
SVG è uno standard W3C.
Altri formati di immagine come le immagini raster possono anche essere bastonate con immagini SVG.
SVG si integra bene con XSLT e DOM di HTML.
Vantaggi
Utilizza qualsiasi editor di testo per creare e modificare immagini SVG.
Essendo basate su XML, le immagini SVG sono ricercabili, indicizzabili e possono essere inserite in script e compresse.
Le immagini SVG sono altamente scalabili in quanto non perdono mai la qualità, indipendentemente dal modo in cui vengono ingrandite o ridimensionate
Buona qualità di stampa a qualsiasi risoluzione
SVG è uno standard aperto
Svantaggi
La dimensione del formato del testo è maggiore rispetto alle immagini raster formattate in binario.
Le dimensioni possono essere grandi anche per immagini piccole.
Esempio
Il seguente frammento XML può essere utilizzato per disegnare un cerchio nel browser web.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>Incorpora l'XML SVG direttamente in una pagina HTML.
testSVG.htm
<html>
<title>SVG Image</title>
<body>
<h1>Sample SVG Image</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. In Internet Explorer, sono necessari i controlli ActiveX per visualizzare le immagini SVG.
Come SVG si integra con HTML
L'elemento <svg> indica l'inizio dell'immagine SVG.
Gli attributi width e height dell'elemento <svg> definiscono l'altezza e la larghezza dell'immagine SVG.
Nell'esempio sopra, abbiamo usato un elemento <circle> per disegnare un cerchio.
Gli attributi cx e cy rappresentano il centro del cerchio. Il valore predefinito è (0,0). L'attributo r rappresenta il raggio del cerchio.
Altri attributi tratto e larghezza del tratto controllano il contorno del cerchio.
L'attributo fill definisce il colore di riempimento del cerchio.
Il tag </svg> di chiusura indica la fine dell'immagine SVG.
SVG fornisce un numero di forme che possono essere utilizzate per disegnare immagini. Di seguito sono riportate le forme comuni.
| Sr.No. | Tipo di forma e descrizione |
|---|---|
| 1 | rect Utilizzato per disegnare un rettangolo. |
| 2 | cerchio Usato per disegnare un cerchio. |
| 3 | ellisse Utilizzato per disegnare un'ellisse. |
| 4 | linea Utilizzato per disegnare una linea. |
| 5 | poligono Utilizzato per disegnare una forma chiusa costituita da linee rette collegate. |
| 6 | polilinea Utilizzato per disegnare una forma aperta costituita da linee rette collegate. |
| 7 | sentiero Utilizzato per disegnare qualsiasi percorso. |
L'elemento <testo> viene utilizzato per disegnare il testo.
Dichiarazione
Di seguito è riportata la dichiarazione della sintassi di <text>elemento. Abbiamo mostrato solo gli attributi principali.
<text
x="x-cordinates"
y="y-cordinates"
dx="list of lengths"
dy="list of lengths"
rotate="list of numbers"
textlength="length"
lengthAdjust="spacing" >
</text>Attributi
| Sr.No. | Attributo e descrizione |
|---|---|
| 1 | x - Coordinate dell'asse x dei glifi. |
| 2 | y - Coordinate dell'asse y dei glifi. |
| 3 | dx - spostamento lungo l'asse x. |
| 4 | dy - spostamento lungo l'asse y. |
| 5 | rotate - rotazione applicata a tutti i glifi. |
| 6 | textlength - lunghezza di rendering del testo. |
| 7 | lengthAdjust - tipo di regolazione con la lunghezza resa del testo. |
Esempio
testSVG.htm<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Testo con rotazione
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Testo multilinea
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="570" height="100">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Testo collegamento ipertestuale
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="10" >Text as Link: </text>
<a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
<text font-family="Verdana" font-size="20" x="30" y="30"
fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
</a>
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
SVG supporta più proprietà di tratto.
Di seguito sono riportate le principali proprietà di tratto utilizzate.
| Sr.No. | Tipo di corsa e descrizione |
|---|---|
| 1 | stroke - definisce il colore del testo, della linea o del contorno di qualsiasi elemento. |
| 2 | stroke-width - definisce lo spessore del testo, della linea o del contorno di qualsiasi elemento. |
| 3 | stroke-linecap - definisce diversi tipi di fine di una linea o contorno di qualsiasi percorso. |
| 4 | stroke-dasharray - utilizzato per creare linee tratteggiate. |
Esempio
testSVG.htm<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke: </text>
<path stroke="red" d="M 50 50 L 300 50" />
<path stroke="green" d="M 50 70 L 300 70" />
<path stroke="blue" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Larghezza del tratto
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<text x="30" y="10" >Using stroke-width: </text>
<path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
<path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
<path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
stroke-linecap
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-linecap: </text>
<path stroke-linecap="butt" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-linecap="round" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-linecap="square" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
ictus-dasharray
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-dasharray: </text>
<path stroke-dasharray="5,5" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-dasharray="10,10" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
SVG utilizza l'elemento <filter> per definire i filtri. L'elemento <filter> utilizza un attributo id per identificarlo in modo univoco. I filtri sono definiti all'interno degli elementi <def> e quindi sono referenziati dagli elementi grafici tramite i loro ID.
SVG fornisce un ricco set di filtri. Di seguito è riportato l'elenco dei filtri comunemente utilizzati.
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - filtro per ombre esterne
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
Dichiarazione
Di seguito è riportata la dichiarazione della sintassi di <filter>elemento. Abbiamo mostrato solo gli attributi principali.
<filter
filterUnits="units to define filter effect region"
primitiveUnits="units to define primitive filter subregion"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
filterRes="numbers for filter region"
xlink:href="reference to another filter" >
</filter>Attributi
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | filterUnits- unità per definire la regione dell'effetto del filtro. Specifica il sistema di coordinate per i vari valori di lunghezza all'interno del filtro e per gli attributi che definiscono la sottoregione del filtro. Se filterUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente in vigore nel momento in cui viene utilizzato l'elemento "filtro". Se filterUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento "filtro". L'impostazione predefinita è userSpaceOnUse. |
| 2 | primitiveUnits- unità per definire la regione dell'effetto del filtro. Specifica il sistema di coordinate per i vari valori di lunghezza all'interno del filtro e per gli attributi che definiscono la sottoregione del filtro. Se filterUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente in vigore nel momento in cui viene utilizzato l'elemento "filtro". Se filterUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento "filtro". L'impostazione predefinita è userSpaceOnUse. |
| 3 | x- Coordinata dell'asse x del riquadro di delimitazione del filtro. Il valore predefinito è 0. |
| 4 | y- Coordinata dell'asse y del riquadro di delimitazione del filtro. L'impostazione predefinita è 0. |
| 5 | width- larghezza del riquadro di delimitazione del filtro. L'impostazione predefinita è 0. |
| 6 | height- altezza del box di delimitazione del filtro. L'impostazione predefinita è 0. |
| 7 | filterRes - numeri che rappresentano le regioni del filtro. |
| 8 | xlink:href - utilizzato per fare riferimento a un altro filtro. |
Esempio
testSVG.htm<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Blur Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter1)" />
</g>
</svg>
</body>
</html>Due elementi <filter> definiti come filtro1 e filtro2.
L'effetto del filtro feGaussianBlur definisce l'effetto di sfocatura con la quantità di sfocatura che utilizza deviazione std.
in = "SourceGraphic" definisce che l'effetto è applicabile all'intero elemento.
L'effetto del filtro feOffset viene utilizzato per creare l'effetto ombra. in = "SourceAlpha" definisce che l'effetto è applicabile per la parte alfa della grafica RGBA.
Gli elementi <rect> collegavano i filtri utilizzando l'attributo filter.
Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Filtro con effetto ombra
<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Shadow Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter2)" />
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
SVG utilizza l'elemento <pattern> per definire i pattern. I modelli vengono definiti utilizzando l'elemento <pattern> e vengono utilizzati per riempire gli elementi grafici in modo affiancato.
Dichiarazione
Di seguito è riportata la dichiarazione della sintassi di <pattern>elemento. Abbiamo mostrato solo gli attributi principali.
<pattern
patternUnits="units to define x,y, width and height attributes."
patternContentUnits ="units to define co-ordinate system of contents of pattern"
patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
preserveAspectRatio="to preserve width/height ratio of original content"
xlink:href="reference to another pattern" >
</pattern>Attributi
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | patternUnits- unità per definire la regione dell'effetto dei modelli. Specifica il sistema di coordinate per i vari valori di lunghezza all'interno del modello e per gli attributi che definiscono la sottoregione del modello. Se patternUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente in posizione nel momento in cui viene utilizzato l'elemento 'pattern'. Se patternUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento "pattern". L'impostazione predefinita è userSpaceOnUse. |
| 2 | patternContentUnits- unità per definire la regione del contenuto del modello. Specifica il sistema di coordinate per i vari valori di lunghezza all'interno del modello e per gli attributi che definiscono la sottoregione del modello. Se patternContentUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente in posizione nel momento in cui viene utilizzato l'elemento 'pattern'. Se patternContentUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento "pattern". L'impostazione predefinita è userSpaceOnUse. |
| 3 | x- Coordinata dell'asse x del riquadro di delimitazione del modello. Il valore predefinito è 0. |
| 4 | y- Coordinata dell'asse y del riquadro di delimitazione del modello. L'impostazione predefinita è 0. |
| 5 | width- larghezza del riquadro di delimitazione del motivo. L'impostazione predefinita è 0. |
| 6 | height- altezza del riquadro di delimitazione del motivo. L'impostazione predefinita è 0. |
| 7 | preserveAspectRatio - per preservare il rapporto larghezza / altezza del contenuto originale. |
| 8 | xlink:href - usato per riferirsi a un altro modello. |
Esempio
testSVG.htm<html>
<title>SVG Pattern</title>
<body>
<h1>Sample SVG Pattern</h1>
<svg width="800" height="800">
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 4 4" >
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
</pattern>
</defs>
<g>
<text x="30" y="50" >Using Pattern (Triangles): </text>
<rect x="100" y="100" width="300" height="300" stroke="green"
stroke-width="3" fill="url(#pattern1)" />
</g>
</svg>
</body>
</html>Un elemento <pattern> definito come pattern1.
In pattern, viene definita una casella di visualizzazione e viene definito un percorso che deve essere utilizzato come pattern.
nell'elemento rect, nell'attributo fill, l'URL del pattern è specificato per riempire il rettangolo con il pattern creato in precedenza.
Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Il gradiente si riferisce alla transizione graduale di un colore a un altro colore all'interno di una forma. SVG fornisce due tipi di sfumature.
Linear Gradients - Rappresenta la transizione lineare da un colore all'altro da una direzione all'altra.
Radial Gradients - Rappresenta la transizione circolare di un colore in un altro da una direzione all'altra.
Gradienti lineari
Dichiarazione
Di seguito è riportata la dichiarazione della sintassi di <linearGradient>elemento. Abbiamo mostrato solo gli attributi principali.
<linearGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</linearGradient>Attributi
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | gradientUnits- unità per definire il sistema di coordinate per i vari valori di lunghezza all'interno del gradiente. Se gradienteUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente al momento in cui viene utilizzato l'elemento gradiente. Se patternContentUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento gradiente. L'impostazione predefinita è userSpaceOnUse. |
| 2 | x1- Coordinata dell'asse x del vettore gradiente. Il valore predefinito è 0. |
| 3 | y1- Coordinata dell'asse y del vettore gradiente. L'impostazione predefinita è 0. |
| 4 | x2- Coordinata dell'asse x del vettore gradiente. Il valore predefinito è 0. |
| 5 | y2- Coordinata dell'asse y del vettore gradiente. L'impostazione predefinita è 0. |
| 6 | spreadMethod- indica il metodo per diffondere il gradiente all'interno dell'elemento grafico. L'impostazione predefinita è "pad". |
| 7 | xlink:href - usato per riferirsi a un altro gradiente. |
Esempio
testSVG.htm<html>
<title>SVG Linear Gradient</title>
<body>
<h1>Sample SVG Linear Gradient</h1>
<svg width="600" height="600">
<defs>
<linearGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</linearGradient>
</defs>
<g>
<text x="30" y="50" >Using Linear Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>Un elemento <linearGradient> definito come sampleGradient.
In linearGradient, due offset sono definiti con due colori.
nell'elemento rect, nell'attributo fill, l'URL del gradiente è specificato per riempire il rettangolo con il gradiente creato in precedenza.
Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Gradienti radiali
Dichiarazione
Di seguito è riportata la dichiarazione della sintassi di <radialGradient>elemento. Abbiamo mostrato solo gli attributi principali.
<radialGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
cx="x-axis co-ordinate of center of circle."
cy="y-axis co-ordinate of center of circle."
r="radius of circle"
fx="focal point for the radial gradient"
fy="focal point for the radial gradient"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</radialGradient>Attributi
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | gradientUnits- unità per definire il sistema di coordinate per i vari valori di lunghezza all'interno del gradiente. Se gradienteUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente al momento in cui viene utilizzato l'elemento gradiente. Se patternContentUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento gradiente. L'impostazione predefinita è userSpaceOnUse. |
| 2 | cx- Coordinata dell'asse x del centro del cerchio più grande del vettore gradiente. Il valore predefinito è 0. |
| 3 | cy- Coordinata dell'asse y del centro del cerchio più grande del vettore gradiente. L'impostazione predefinita è 0. |
| 4 | r- raggio del centro del cerchio più grande del vettore gradiente. Il valore predefinito è 0. |
| 5 | fx- punto focale del gradiente radiale. L'impostazione predefinita è 0. |
| 6 | fy- punto focale del gradiente radiale. L'impostazione predefinita è 0. |
| 7 | spreadMethod- indica il metodo per diffondere il gradiente all'interno dell'elemento grafico. L'impostazione predefinita è "pad". |
| 8 | xlink:href - usato per riferirsi a un altro gradiente. |
Esempio
testSVG.htm<html>
<title>SVG Radial Gradient</title>
<body>
<h1>Sample SVG Radial Gradient</h1>
<svg width="600" height="600">
<defs>
<radialGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</radialGradient>
</defs>
<g>
<text x="30" y="50" >Using Radial Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>Un elemento <radialGradient> definito come sampleGradient.
In radialGradient, due offset sono definiti con due colori.
nell'elemento rect, nell'attributo fill, l'URL del gradiente è specificato per riempire il rettangolo con il gradiente creato in precedenza.
Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Le immagini SVG possono essere rese reattive alle azioni dell'utente. SVG supporta eventi del puntatore, eventi della tastiera e eventi del documento. Considera il seguente esempio.
Esempio
testSVG.htm<html>
<title>SVG Interactivity</title>
<body>
<h1>Sample Interactivity</h1>
<svg width="600" height="600">
<script type="text/JavaScript">
<![CDATA[
function showColor() {
alert("Color of the Rectangle is: "+
document.getElementById("rect1").getAttributeNS(null,"fill"));
}
function showArea(event){
var width = parseFloat(event.target.getAttributeNS(null,"width"));
var height = parseFloat(event.target.getAttributeNS(null,"height"));
alert("Area of the rectangle is: " +width +"x"+ height);
}
function showRootChildrenCount() {
alert("Total Children: "+document.documentElement.childNodes.length);
}
]]>
</script>
<g>
<text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
<rect id="rect1" x="100" y="100" width="200" height="200"
stroke="green" stroke-width="3" fill="red"
onClick="showArea(event)"/>
<text x="30" y="400" onClick="showRootChildrenCount()">
Click me to print child node count.</text>
</g>
</svg>
</body>
</html>Spiegazione
SVG supporta le funzioni JavaScript / ECMAScript. Il blocco di script deve essere nel blocco CDATA, considerare il supporto dei dati dei caratteri in XML.
Gli elementi SVG supportano eventi del mouse, eventi della tastiera. Abbiamo utilizzato l'evento onClick per chiamare una funzione javascript.
Nelle funzioni javascript, document rappresenta il documento SVG e può essere utilizzato per ottenere gli elementi SVG.
Nelle funzioni javascript, l'evento rappresenta l'evento corrente e può essere utilizzato per ottenere l'elemento di destinazione su cui è stato generato l'evento.
Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG. Fare clic su ogni testo e rettangolo per vedere il risultato.
L'elemento <a> viene utilizzato per creare un collegamento ipertestuale. L'attributo "xlink: href" viene utilizzato per passare l'IRI (Internationalized Resource Identifiers) che è complementare all'URI (Uniform Resource Identifiers).
Dichiarazione
Di seguito è riportata la dichiarazione della sintassi di <a>elemento. Abbiamo mostrato solo gli attributi principali.
<a
xlink:show = "new" | "replace"
xlink:actuate = "onRequest"
xlink:href = "<IRI>"
target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>Attributi
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | xlink:show- a scopo di documentazione per i processori che supportano XLink. L'impostazione predefinita è nuovo. |
| 2 | xlink:actuate - a scopo di documentazione per i processori che supportano XLink. |
| 3 | xlink:href - posizione dell'oggetto referenziato. |
| 4 | target - utilizzato quando sono possibili obiettivi per la risorsa finale. |
Esempio
testSVG.htm<html>
<title>SVG Linking</title>
<body>
<h1>Sample Link</h1>
<svg width="800" height="800">
<g>
<a xlink:href="http://www.tutorialspoint.com">
<text x="0" y="15" fill="black" >
Click me to load TutorialsPoint DOT COM.</text>
</a>
</g>
<g>
<text x="0" y="65" fill="black" >
Click in the rectangle to load TutorialsPoint DOT COM</text>
<a xlink:href="http://www.tutorialspoint.com">
<rect x="100" y="80" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" />
</a>
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG. Fare clic sul collegamento e sul rettangolo per vedere il risultato.