SVG - szybki przewodnik

Co to jest SVG?

SVG, Scalable Vector Graphics to język oparty na XML do definiowania grafiki wektorowej.
SVG jest przeznaczony do wyświetlania obrazów w Internecie.
Będąc obrazami wektorowymi, obraz SVG nigdy nie traci jakości, niezależnie od tego, jak są pomniejszane lub zmieniane.
Obrazy SVG obsługują interaktywność i animację.
SVG to standard W3C.
Inne formaty obrazów, takie jak obrazy rastrowe, również można łączyć z obrazami SVG.
SVG dobrze integruje się z XSLT i DOM HTML.

Zalety

Użyj dowolnego edytora tekstu, aby tworzyć i edytować obrazy SVG.
Opierając się na XML, obrazy SVG można przeszukiwać, indeksować, a także skrypty i kompresować.
Obrazy SVG są wysoce skalowalne, ponieważ nigdy nie tracą jakości, niezależnie od tego, jak są pomniejszane lub zmieniane
Dobra jakość druku w dowolnej rozdzielczości
SVG to otwarty standard

Niedogodności

Rozmiar formatu tekstowego jest większy niż w przypadku obrazów rastrowych w formacie binarnym.
Rozmiar może być duży nawet dla małego obrazu.

Przykład

Poniższy fragment kodu XML może służyć do rysowania koła w przeglądarce internetowej.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

Osadź plik SVG XML bezpośrednio na stronie 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>

Wynik

Otwórz textSVG.htm w przeglądarce internetowej Chrome. Możesz użyć przeglądarki Chrome / Firefox / Opera, aby wyświetlić obraz SVG bezpośrednio, bez żadnej wtyczki. W przeglądarce Internet Explorer do wyświetlania obrazów SVG wymagane są kontrolki activeX.

Jak SVG integruje się z HTML

Element <svg> wskazuje początek obrazu SVG.
Atrybuty width i height elementu <svg> definiują wysokość i szerokość obrazu SVG.
W powyższym przykładzie użyliśmy elementu <circle>, aby narysować okrąg.
Atrybut cx i cy reprezentuje środek koła. Wartość domyślna to (0,0). Atrybut r reprezentuje promień okręgu.
Inne atrybuty obrys i szerokość obrysu sterują obrysem okręgu.
atrybut wypełnienia określa kolor wypełnienia koła.
Zamykający tag </svg> oznacza koniec obrazu SVG.

SVG udostępnia wiele kształtów, których można używać do rysowania obrazów. Poniżej przedstawiono typowe kształty.

Sr.No.	Typ i opis kształtu
1	prost Służy do rysowania prostokąta.
2	okrąg Służy do rysowania koła.
3	elipsa Służy do rysowania elipsy.
4	linia Służy do rysowania linii.
5	wielokąt Służy do rysowania zamkniętego kształtu składającego się z połączonych linii prostych.
6	polilinia Służy do rysowania otwartego kształtu składającego się z połączonych linii prostych.
7	ścieżka Służy do rysowania dowolnej ścieżki.

Element <text> służy do rysowania tekstu.

Deklaracja

Poniżej znajduje się deklaracja składni <text>element. Pokazaliśmy tylko główne atrybuty.

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

Atrybuty

Sr.No.	Atrybut i opis
1	x - współrzędne osi x glifów.
2	y - współrzędne osi y glifów.
3	dx - przesuń wraz z osią X.
4	dy - przesuń wraz z osią y.
5	rotate - obrót zastosowany do wszystkich glifów.
6	textlength - długość renderowania tekstu.
7	lengthAdjust - rodzaj korekty z wyrenderowaną długością tekstu.

Przykład

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>

Wynik

Otwórz textSVG.htm w przeglądarce internetowej Chrome. Możesz użyć przeglądarki Chrome / Firefox / Opera, aby wyświetlić obraz SVG bezpośrednio, bez żadnej wtyczki. Internet Explorer 9 i nowsze wersje obsługują również renderowanie obrazu SVG.

Tekst z obracaniem

<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>

Wynik

Tekst wielowierszowy

<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>

Wynik

Tekst hiperłącza

<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>

Wynik

SVG obsługuje wiele właściwości obrysu.

Poniżej przedstawiono główne używane właściwości obrysu.

Sr.No.	Typ i opis pociągnięcia
1	stroke - określa kolor tekstu, linii lub konturu dowolnego elementu.
2	stroke-width - określa grubość tekstu, linię lub kontur dowolnego elementu.
3	stroke-linecap - definiuje różne typy zakończenia linii lub obrysu dowolnej ścieżki.
4	stroke-dasharray - używany do tworzenia linii przerywanych.

Przykład

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>

Wynik

Szerokość kreski

<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>

Wynik

obrys-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>

Wynik

kreska-kreska

<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>

Wynik

SVG używa elementu <filter> do definiowania filtrów. Element <filter> używa atrybutu id, aby go jednoznacznie zidentyfikować. Filtry są definiowane w elementach <def>, a elementy graficzne odwołują się do nich poprzez ich identyfikatory.

SVG zapewnia bogaty zestaw filtrów. Poniżej znajduje się lista najczęściej używanych filtrów.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - filtr cieni
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Deklaracja

Poniżej znajduje się deklaracja składni <filter>element. Pokazaliśmy tylko główne atrybuty.

<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>

Atrybuty

Sr.No.	Nazwa i opis
1	filterUnits- jednostki definiujące region efektu filtra. Określa układ współrzędnych dla różnych wartości długości w filtrze oraz dla atrybutów definiujących obszar podrzędny filtru. Jeśli filterUnits = "userSpaceOnUse", wartości reprezentują wartości w bieżącym układzie współrzędnych użytkownika obowiązującym w momencie użycia elementu „filter”. Jeśli filterUnits = "objectBoundingBox", wartości reprezentują wartości w ułamkach lub procentach ramki ograniczającej elementu odniesienia w miejscu, w którym jest używany element „filter”. Wartość domyślna to userSpaceOnUse.
2	primitiveUnits- jednostki definiujące region efektu filtra. Określa układ współrzędnych dla różnych wartości długości w filtrze oraz dla atrybutów definiujących obszar podrzędny filtru. Jeśli filterUnits = "userSpaceOnUse", wartości reprezentują wartości w bieżącym układzie współrzędnych użytkownika obowiązującym w momencie użycia elementu „filter”. Jeśli filterUnits = "objectBoundingBox", wartości reprezentują wartości w ułamkach lub procentach ramki ograniczającej elementu odniesienia w miejscu, w którym jest używany element „filter”. Wartość domyślna to userSpaceOnUse.
3	x- współrzędna osi x ramki ograniczającej filtr. Pokonanie wynosi 0.
4	y- współrzędna osi Y ramki ograniczającej filtr. Wartość domyślna to 0.
5	width- szerokość ramki ograniczającej filtr. Wartość domyślna to 0.
6	height- wysokość ramki ograniczającej filtr. Wartość domyślna to 0.
7	filterRes - liczby reprezentujące obszary filtrów.
8	xlink:href - używany w odniesieniu do innego filtra.

Przykład

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>

Dwa elementy <filter> zdefiniowane jako filtr1 i filtr2.
Efekt filtra feGaussianBlur definiuje efekt rozmycia z ilością rozmycia za pomocą odchylenia std.
in = "SourceGraphic" określa, że efekt ma zastosowanie do całego elementu.
Efekt filtra feOffset służy do tworzenia efektu cienia. in = „SourceAlpha” określa, że efekt ma zastosowanie do części alfa grafiki RGBA.
Elementy <rect> połączyły filtry za pomocą atrybutu filtra.

Wynik

Filtruj z efektem cienia

<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>

Wynik

SVG używa elementu <pattern> do definiowania wzorców. Wzory są definiowane za pomocą elementu <pattern> i służą do wypełniania elementów graficznych w sposób kafelkowy.

Deklaracja

Poniżej znajduje się deklaracja składni <pattern>element. Pokazaliśmy tylko główne atrybuty.

<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>

Atrybuty

Sr.No.	Nazwa i opis
1	patternUnits- jednostki definiujące region efektu wzorców. Określa układ współrzędnych dla różnych wartości długości w szyku i atrybutów definiujących obszar podrzędny wzoru. Jeśli patternUnits = "userSpaceOnUse", wartości reprezentują wartości w bieżącym układzie współrzędnych użytkownika obowiązującym w czasie, gdy używany jest element wzorca. Jeśli patternUnits = "objectBoundingBox", wartości reprezentują wartości w ułamkach lub procentach ramki ograniczającej elementu odniesienia w miejscu, w którym używany jest element wzorca. Wartość domyślna to userSpaceOnUse.
2	patternContentUnits- jednostki definiujące region zawartości wzorca. Określa układ współrzędnych dla różnych wartości długości w szyku i atrybutów definiujących obszar podrzędny wzoru. Jeśli patternContentUnits = "userSpaceOnUse", wartości reprezentują wartości w bieżącym układzie współrzędnych użytkownika obowiązującym w momencie użycia elementu wzorca. Jeśli patternContentUnits = "objectBoundingBox", wartości reprezentują wartości w ułamkach lub procentach ramki ograniczającej elementu odniesienia w miejscu w momencie użycia elementu „wzorzec”. Wartość domyślna to userSpaceOnUse.
3	x- współrzędna osi x ramki ograniczającej wzór. Pokonanie wynosi 0.
4	y- współrzędna osi Y ramki ograniczającej wzór. Wartość domyślna to 0.
5	width- szerokość ramki ograniczającej wzór. Wartość domyślna to 0.
6	height- wysokość obwiedni wzoru. Wartość domyślna to 0.
7	preserveAspectRatio - aby zachować stosunek szerokości do wysokości oryginalnej treści.
8	xlink:href - odnosił się do innego wzoru.

Przykład

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>

Jeden element <pattern> zdefiniowany jako wzorzec1.
We wzorcu definiowane jest pole widoku i ścieżka, która ma być używana jako wzorzec.
w elemencie rect, w atrybucie fill, podaje się adres URL wzorca, aby wypełnić prostokąt utworzonym wcześniej wzorcem.

Wynik

Gradient odnosi się do płynnego przejścia jednego koloru do innego koloru w kształcie. SVG udostępnia dwa rodzaje gradientów.

Linear Gradients - Reprezentuje liniowe przejście jednego koloru do drugiego z jednego kierunku do drugiego.
Radial Gradients - Reprezentuje koliste przejście jednego koloru do drugiego z jednego kierunku do drugiego.

Gradienty liniowe

Deklaracja

Poniżej znajduje się deklaracja składni <linearGradient>element. Pokazaliśmy tylko główne atrybuty.

<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>

Atrybuty

Sr.No.	Nazwa i opis
1	gradientUnits- jednostki definiujące układ współrzędnych dla różnych wartości długości w gradiencie. Jeśli gradientUnits = "userSpaceOnUse", wartości reprezentują wartości w bieżącym układzie współrzędnych użytkownika obowiązującym w momencie użycia elementu gradientu. Jeśli patternContentUnits = "objectBoundingBox", wartości reprezentują wartości w ułamkach lub procentach obwiedni elementu odniesienia w miejscu w momencie użycia elementu gradientu. Wartość domyślna to userSpaceOnUse.
2	x1- współrzędna osi x wektora gradientu. Pokonanie wynosi 0.
3	y1- współrzędna osi Y wektora gradientu. Wartość domyślna to 0.
4	x2- współrzędna osi x wektora gradientu. Pokonanie wynosi 0.
5	y2- współrzędna osi Y wektora gradientu. Wartość domyślna to 0.
6	spreadMethod- wskazuje sposób rozłożenia gradientu w elemencie graficznym. Domyślnie jest to „pad”.
7	xlink:href - używany w odniesieniu do innego gradientu.

Przykład

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>

Jeden element <linearGradient> zdefiniowany jako sampleGradient.
W linearGradient dwa przesunięcia są definiowane za pomocą dwóch kolorów.
w elemencie rect, w atrybucie fill, podaje się adres URL gradientu, aby wypełnić prostokąt utworzonym wcześniej gradientem.

Wynik

Gradienty radialne

Deklaracja

Poniżej znajduje się deklaracja składni <radialGradient>element. Pokazaliśmy tylko główne atrybuty.

<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>

Atrybuty

Sr.No.	Nazwa i opis
1	gradientUnits- jednostki definiujące układ współrzędnych dla różnych wartości długości w gradiencie. Jeśli gradientUnits = "userSpaceOnUse", wartości reprezentują wartości w bieżącym układzie współrzędnych użytkownika obowiązującym w momencie użycia elementu gradientu. Jeśli patternContentUnits = "objectBoundingBox", wartości reprezentują wartości w ułamkach lub procentach obwiedni elementu odniesienia w miejscu w momencie użycia elementu gradientu. Wartość domyślna to userSpaceOnUse.
2	cx- współrzędna osi x środka największego koła wektora gradientu. Pokonanie wynosi 0.
3	cy- współrzędna osi Y środka największego koła wektora gradientu. Wartość domyślna to 0.
4	r- promień środka największego koła wektora gradientu. Pokonanie wynosi 0.
5	fx- ognisko gradientu radialnego. Wartość domyślna to 0.
6	fy- ognisko gradientu radialnego. Wartość domyślna to 0.
7	spreadMethod- wskazuje sposób rozłożenia gradientu w elemencie graficznym. Domyślnie jest to „pad”.
8	xlink:href - używany w odniesieniu do innego gradientu.

Przykład

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>

Jeden element <radialGradient> zdefiniowany jako sampleGradient.
W radialGradient dwa przesunięcia są definiowane za pomocą dwóch kolorów.
w elemencie rect, w atrybucie fill, podaje się adres URL gradientu, aby wypełnić prostokąt utworzonym wcześniej gradientem.

Wynik

Obrazy SVG mogą reagować na działania użytkownika. SVG obsługuje zdarzenia wskaźnika, zdarzenia klawiatury i zdarzenia dokumentów. Rozważmy następujący przykład.

Przykład

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>

Wyjaśnienie

SVG obsługuje funkcje JavaScript / ECMAScript. Blok skryptu powinien znajdować się w bloku CDATA. Należy wziąć pod uwagę obsługę danych znakowych w formacie XML.
Elementy SVG obsługują zdarzenia myszy, zdarzenia klawiatury. Użyliśmy zdarzenia onClick do wywołania funkcji javascript.
W funkcjach javascript dokument reprezentuje dokument SVG i może być użyty do pobrania elementów SVG.
W funkcjach javascript zdarzenie reprezentuje bieżące zdarzenie i może być użyte do pobrania elementu docelowego, dla którego zdarzenie zostało wywołane.

Wynik

Element <a> służy do tworzenia hiperłącza. Atrybut „xlink: href” służy do przekazywania IRI (Internationalized Resource Identifiers), który jest uzupełnieniem URI (Uniform Resource Identifiers).

Deklaracja

Poniżej znajduje się deklaracja składni <a>element. Pokazaliśmy tylko główne atrybuty.

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

Atrybuty

Sr.No.	Nazwa i opis
1	xlink:show- do celów dokumentacyjnych dla procesorów obsługujących XLink. Domyślnie jest nowy.
2	xlink:actuate - do celów dokumentacyjnych dla procesorów obsługujących XLink.
3	xlink:href - lokalizacja przywoływanego obiektu.
4	target - używane, gdy cele dla zasobu końcowego są możliwe.

Przykład

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>

Wynik