A WEB programozása - SVG dr.gál Tibor őszi félév. Fontosabb jellemzők SVG

Átírás

1 SVG Fontosabb jellemzők SVG=Scalable Vector Gaphics /Skálázható vektorgrafika/ Vektor alapú grafika definiálása a WEB-en A grafika definiálása XML formában SVG grafika nem veszít felbontásából (pontosságából) zoomoláskor vagy átméretezéskor svg\0.html,svg\00.html, svg\000.html, svg\tree.html, svg\tree1.html, eloszlas Minden SVG elem és jellemző animálható World Wide Web Consortium (W3C) ajánlás, ill. szabvány Más W3C szabványokat (DOM, XSL) is integrál SVG januárjában jelent meg mint W3C Ajánlás (W3C Recommendation) Sun, Adobe, Apple, IBM, Kodak, stb. közreműködésével definiálták Előnyei más képformátumokkal (JPEG, GIF) szemben SVG fájlok sokféle eszközzel olvashatók és módosíthatók (pl. notepad) Kisebb méretűek és jobban tömöríthetők mint a JPEG és GIF képek Skálázhatók (átméretezhetők nagyíthatók, kicsinyíthetők) Nagypontossággal nyomtathatók bármilyen felbontásnál Az SVG képek és részeik is zoomolhatók a pontosság csökkenése nélkül Az SVG-n belüli szövegek kiválasztatók és kereshetők (kiváló tulajdonság térképek esetén) Az SVG együtt tud működni a Java technológiával Nyílt szabvány Az SVG fájlok tiszta XML állományok Fő vetélytársuk a Flash Az SVG legnagyobb előnye a Flash-sel szemben kompatibilitás más szabványokkal (pl.xsl, DOM), s a Flash nem nyílt forrású Az SVG jelenlegi hátrányos tulajdonsága, hogy nem támogatja minden böngésző. Mozilla, Firefox és Opera támogatja, a Microsoft pedig tervezi Az SVG szerkesztők száma növekszik, s több rajzlóprogram kimeneti formátumként is felajánlja (pl. CorelDraw) Az SVG fájlok megjelenítése Ha a böngésző nem támogatja az SVG fájlok megjelenítését, akkor egy SVG megjelenítőre van szüksége Firefox 1.5 és Opera 9 native SVG megjelenítőt tartalmaz. Ilyen böngészők használatakor nincs szüksége SVG megjelenítőre. Internet Explorer esetén telepítse az ingyen letölthető Adobe plugin-t, vagy használjon egy önálló Adobe SVG megjelenítőt. 1

2 Bevezető példa A következő példa egy egyszerű SVG állományt mutat be. Az SVG állományokat.svg kiterjesztésű névvel kell tárolni. svg\kor.svg <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="100%" height="100%" version="1.1" xmlns=" <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> Magyarázat <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="100%" height="100%" version="1.1" xmlns=" <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> Az első sor az XML deklaráció. A standalone jellemzőno értéke arra utal, hogy ez a dokumentum külső fájl(ok)ra is hivatkozik, ebben az esetben a DTD-re. A második és a harmadik sor az SVG DTD-jére hivatkozik, amely a megadott url-lel van azonosítva. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="100%" height="100%" version="1.1" xmlns=" <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> Az SVG kód az<svg> dokumentum gyökérelemben található. Ennek width és height jellemzője specifikálja az svg dokumentum szélességét és magasságát. Itt kell még megadni a version jellemzőt és az svg névtartományát az xmlns jellemző megfelelő értékével! Az svg<circle> elem egy kör létrehozására szolgál. cx és cy a kör középpontját, r pediga sugarát írja elő. Ha elhagyjuk cx écy értkét, akkor azok 0 értéket veszne fel. Astroke,stroke-width, fill jellemzők a vonal színét, vonal vastagságát és az alakzatot kitöltő színt specifikálják. Figyelem: A dokumentumnak jól formázottnak kell lenni! Beilesztés HTML dokumentumba I. SVG fájlok az embed, object és iframe elemekkel a html fájlokba be is illesztetők. svg\1.html <html>... SVG beszúrása html dokumentumba EMBED elemmel <embed src="rect.svg" width="300" height="100" pluginspage=" type="image/svg+xml"/> SVG beszúrása html dokumentumba OBJECT elemmel <object data="rect.svg" width="300" height="100" codebase=" type="image/svg+xml"> </object> SVG beszúrása html dokumentumba IFRAME elemmel <iframe src="rect.svg" width="300" height="100"> </iframe>... </html> 2

3 Beilesztés HTML dokumentumba II. SVG elemek a html fájlokba inline módon is beillesztetők. Bár a fájl tartamlát illetően kompatibilitás van IE és FF között, de IE esetén.html, FF esetn pedig.xml kiterjesztést kell használni. svg\2ie.html, svg\2ff.bat, svg\2ieff.html A 2ieff.html fájl <html> <script> ver=navigator.appversion ie=(ver.indexof("msie") > -1)?1:0; if(ie) location.href="2ie.html"; else location.href="2ff.xml"; </html> A 2ie.html és 2ff.xml fájlok tartalma egyaránt <?xml version="1.0" encoding="iso8859-2"?> <html xmlns=" xmlns:svg=" <head> <title>svg embedded inline in XHTML</title> <object id="adobesvg" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object> <?import namespace="svg" urn=" implementation="#adobesvg"?> </head> <body> <h1>svg inline módon XHTML állományban</h1> <div style="position:relative; width:320px;left:20px;background-color:yellow"> <svg:svg version="1.1" baseprofile="full" width="300px" height="200px"> <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/> </svg:svg> </div> <p style="font-size:32px">a fehér hátterû részekben html elemekkel, a sárga hátterûben viszont svg elemekkel generált objektumok jelennek meg. </p> </body> </html> SVG alakzatok Előre definiált és manipulálható alakzatok Téglalap<rect> Kör<circle> Ellipszis<ellipse> Vonal<line> Vonalszakaszok<polyline> Poligon<polygon> Útvonal<path> 3

4 Téglalap példák <rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/> svg\rect1.html <rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5; opacity:0.9"/> svg\rect2.html Kör példa <circle r="40" stroke="red" stroke-width="2" fill="green"/> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> svg\circle.html cx, cy: - a középpont koordinátái (default értékük 0) r: - a kör sugara Opak - fedési tulajdonság demo: svg\rect3.html opacity:0 - teljesen átlátszó opacity:1 - teljesen átlátszatlan Ellipszis példa <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/> svg\ellipse.html cx, cy: - a középpont (nem fókusz!) koordinátái (default értékük 0) rx, ry: - a vízszintes és függőleges sugarak Vonal példa <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> svg\line.html x1, y1: - a kezdőpont koordinátái x2, y2: - a végpont koordinátái Vonalszakaszok példa <polyline points="0,0 0,50 50,50 50, , ,150" stroke:red;stroke-width:5"/> svg\polyine.html points: - a kezdőpont, töréspontok és végpont koordinátái 4

5 Poligon példa <polygon points="220, , ,250" style="fill:#cccccc; stroke:#000000;stroke-width:2"/> svg\polygon.html points: - a poligon csúcspontjainak koordinátái Útvonal példa <svg width="12cm" height="5.25cm" viewbox=" " xmlns=" version="1.1"> <title>körív parancsok egy path elemben</title> <desc>kördiagramm két körcikkel, vonal ivekkel</desc> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="1" /> <path d="m300,200 h-150 a150, ,0 150,-150 z" fill="red" stroke="blue" stroke-width="5" /> <path d="m275,175 v-150 a150, ,0-150,150 z" fill="yellow" stroke="blue" stroke-width="5" /> <path d="m600,350 l 50,-25 a25, ,1 50,-25 l 50,-25 a25, ,1 50,-25 l 50,-25 a25, ,1 50,-25 l 50,-25 a25, ,1 50,-25 l 50,-25" fill="none" stroke="red" stroke-width="5" /> svg\path.html Útvonal parancsok (d jellemző elemei) M=moveto L=lineto H=horizontal lineto V=vertical lineto C=curveto S=smooth curveto Q=quadratic Bézier curve T=smooth quadratic Bézier curveto A=elliptical Arc Z=closepath A nagybetűs parancsokat abszolút, a kisbetűseket pedig relatív koordináták követik. M=A rajzolandó útvonal kezdőpontját állítja be L =Egyenest rajzol a jelenlegi pontból a specifikáltba, s a specifikált pont válik jelenlegi ponttá. Több egymást követő pont is specifikálható egyetlen L parancsban Z =Az útvonal jelenlegi pontját egy egyenessel összeköti az útvonal kezdőpontjával (zárja az útvonalat) Például: d="m L L Z" vagy d="m L Z" H =Vízszintes vonalat rajzol a jelenlegi pontból a specifikált x értékig V =Függőleges vonalat rajzol a jelenlegi pontból a specifikált y értékig Például egy négyzet kirajzolása a rect, ill. path elemmel <rect x="5" y="5" width="60" height="60"/> <path d="m 5 5 H 65 V65 H 5 V 5" /> <path d="m 5 5 H 65 V65 H 5 Z" /> 5

6 A=Ellipszisív (körív) rajzolása a jelenlegi pontból kiindulva hét paraméterrel. A rx,ry xar laf,sf x,y ahol rx, ry az x és y tengely menti sugár xar (x-axis rotation) az ellipszis relatív eforgatásának iránya laf,sf (large-arc-flag,swep flag) A kezdő és végponton két ellipszis rajzolható, a rajzolási irány kétféle lehet. A két paraméter 0,0 0,1 1,0 1,1 értéket vehet fel. Hatásukat az ábra szemlélteti. x,y az ellipszisív végpontja. Több paramétercsoporttal multiellipszisív rajzolható. C=Harmadfokú Bézier görbe rajzolása a jelenlegi pontból kiindulva hat paraméterrel. C x1,y1 x2,y2 x,y ahol x,y a görbe végpontja, a rajzolás után ez lesz a jelenlegi pont x1,y1 a görbe kezdőpontbeli vezérpontja x2,y2 a görbe végpontbeli vezérpontja Több paramétercsoporttal multibézier görbe rajzolható. pelda Néhány elem <text> <tspan> <tref> Szöveg beillesztése A text elem Az alakzatokon használható attribútumok, transzformációk ezen az elemen is használhatók Speciális lehetőségek individuális karakterek tetszőleges pozícióba helyezhetők individuális karakterek tetszőlegesen forgathatók Példa <text x="50%" y="50%," dx="0,0,0,0,20" dy="0,0,0,0,8" rotate="20,30,40,50,0,0,-10" textlength="..." lengthadjust="..." font-size="30" text-anchor="middle"> Hello World </text> 6

7 Attribútumok x A karakterek x pozícióinak listája y A karakterek y pozícióinak listája dx Hosszúságlista, a karakterek relatív eltolására az abszolút x pozícióhoz képest dy Hosszúságlista, a karakterek relatív eltolására az abszolút y pozícióhoz képest rotate Az egyes karakterek elforgatási szögei. Az n. érték az n. karakterre vonatkozik. textlength Amilyen hosszon a szöveg megjelenítendő. lengthadjust Az adott hosszúságú megjelenítéshez mi szabályozható (lehetséges értékei: spacing és spacingandglyphs) Prezentációs attribútumok: szín: color, color-interpolation, color-rendering kiöltés: fill, fill-opacity, stroke-width, grafika: clip-path, clip-rule, cursor, display, filter, font spec.:font-falily, font-size, font-weight, szövegtartalom: alignment-baseline, direction, letter-spacing, A tspan elem Megegyezik a text elemmel, de a text elem tartalmán belül és önmagán belül is használható A tref elem Egy azonosított szövegrészt helyez el <defs> <text id="awp">a WEB programozása</text>... <text x="100" y="200" font-size="45" fill="red"> <tref xlink:href="#awp" /> </text> Elemek <g> <defs> <use> Csoportosítás A g (grouping)elem Elsődleges elem az svg dokumentum strukturálására A tartalmazott elemek tulajdonságait együttesen előírhatja Egyedi azonosítójával (id) valamennyi tartalmazott eleme hivatkozható Attribútumai nem írják felül a gyermekelemek explicite megadott attribútumait De a default, explicite nem definiáltakat igen svg\grouping.html  <rect x="0" y="0" width="100%" height="100%" fill="url(#sakkminta)" />  <g id="group1" fill="green" opacity="0.9" stroke="red" stroke-width="5"> <rect x="20" y="20" width="100" height="100" opacity="0.5" stroke-width="20"/> <rect x="80" y="80" width="100" height="100" fill="gray" /> </g> 7

8 <svg xmlns=" xmlns:xlink=" xml:space="preserve" width="400" height="400" viewbox=" " >  <defs> <pattern id="sakkminta" patternunits="userspaceonuse" x="0" y="0" width="20" height="20" viewbox=" " > <rect x="0" y="0" width="5" height="5" fill="lightblue" /> <rect x="5" y="5" width="5" height="5" fill="lightblue" /> </pattern>... A defs (define) és use (használd) elem SVG elemek definiálása későbbi felhasználásra Nem jelenít meg, de a hivatkozása (pl. use) igen <defs> <g id="group1" fill="green" opacity="0.9" > <rect x="20" y="20" width="100" height="100" opacity="0.5" /> <rect x="80" y="80" width="100" height="100" fill="gray" /> </g> <use x="0" y="0" width="200" height="200" xlink:href="#group1" /> <use x="0" y="0" width="200" height="200" xlink:href="#group1" transform="rotate(70, 100, 100)" /> svg\grouping1.html Stílus Megjelenítés stílusa=objektum stílusa + szülőobjektum stílusa (öröklés) Hiányzó jellemző a default értékkel helyettesítődik Stílustulajdonságok döntően a CSS-nek felelnek meg A megjelenítés css style attribútummal is megadható egyes svg megjelenítők esetén, de ezt nem írja elő a szabvány Stílusmegadási lehetőségek 1. Szabványos svg attribútumok használata 2. Inline css megadás 3. Css megadása a defs elemben (belső stíluslap) 4. Css megadása külső fájlban (külső stíluslap) Szabványos svg attribútumok használata svg\stilus1.html <rect x="20" y="20" rx="0" ry="0" width="160" height="160" fill="blue" stroke="black" stroke-width="4" stroke-dasharray="10,5" /> Inline css megadás <rect x="20" y="20" rx="0" ry="0" width="160" height="160" style="fill:blue; stroke:black; stroke-width:4; stroke-dasharray:10,5;" /> Css megadása a defs elemben <defs> <style type="text/css"><![cdata[ rect { fill:blue; stroke:black; stroke-width:4; stroke-dasharray:10,5; ]]> </style> <rect x="20" y="20" width="160" height="160" class="rect" /> 8

9 Css megadása a külső fájlban (legtöbb megjelenítő nem támogatja) // A style.css fájl <defs> <style type="text/css"><![cdata[ rect { fill:blue; stroke:black; stroke-width:4; stroke-dasharray:10,5; ]]> </style> // Hivatkozás a külső fájlban megadott stílusra <?xml-stylesheet href="style.css" type="text/css"?> <rect x="20" y="20" width="160" height="160" class="rect" /> Gradiens Minden gradiens és minta a defs elemben defíniálandó és uri-vel hivatkozható Minden color-t igénylő attribútum használhat gradienst Gradiens=folytonos átmenet egyik állapotból a másikba Az egyes részek végpontjai a stop elemek határolják A stop értéke 0 és 1 közé állítható A stop attribútumai: color, opacity és offset A stop elemeket lineargradient vagy radialgradient elemekbe helyezhetjük <?xml version="1.0"?> lineargradient radialgradient <svg xmlns=" xmlns:xlink=" width="600" height="400"> <defs> <lineargradient x1="0%" x2="100%" id="grad1" > <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="green" /> </lineargradient> <lineargradient x1="0%" x2="100%" id="grad2" > <stop offset="0%" stop-color="red" /> <stop offset="50%" stop-color="white" /> <stop offset="100%" stop-color="green" /> </lineargradient> Minták Egy minta egy kis svg dokumentumnak tekinthető Defíniálása a koordináták és a méretek megadásával kezdődik Ezt követi a mintát meghatározó alakzatok megadása A minta a hivatkozó objektumban annak határáig ismétlődik, a kívülre eső részek vágódnak Mint a gradient, ez is a defs elemben definiálandó <rect x="20" y="20" width="400" height="60" fill="url(#grad1)" /> <rect x="20" y="100" width="400" height="60" fill="url(#grad2)" /> 9

10 <defs> svg\pattern.html <pattern id="pat1" patternunits="userspaceonuse" x="0" y="0" width="20" height="20" viewbox=" "> <rect x="0" y="0" width="5" height="5" fill="lightblue"/> <rect x="5" y="5" width="5" height="5" fill="lightblue"/> </pattern> <pattern id="pat2" patternunits="userspaceonuse" x="0" y="0" width="20" height="20" viewbox=" "> <circle r="5" cx="10" cy="10" stroke="red" stroke-width="2" fill="lightblue"/> </pattern> Paramterek patternunits userspaceonuse érték mellett a csempék egymáshoz illesztve rakódnak le objectboundingbox esetén a kitöltendő objektum méretitől függően térközökkel, ill. átfedéssel történik a csempék lerakása x, y, witdth, height, viewbox értelmezésük mint az svg elem esetén <rect id="bg1" x="0" y="0" width="400" height="200" fill="url(#pat1)"/> <text x="50%" y="25%" stroke="gray" font-size="40" text-anchor="middle">jó NAPOT KÍVÁNOK!</text> <ellipse cx="200" cy="300" rx="200" ry="100" fill="url(#pat2)" id="bg2" /> <text x="50%" y="75%" stroke="gray" font-size="40" text-anchor="middle">jó NAPOT KÍVÁNOK!</text> Transzormációk Konténer elemeken (svg, g, image) és bármilyen alakzaton végrehajthatók Fajtáik translate(x,y) Eltolás scale(sx,sy) Skálázás rotate(angle,cx,cy) Forgatás skewx x-tengely forgatása skewy y-tengely forgatása matrix(a,b,c,d,e,f) A jelenlegi transzformációs szorzása Példa: svg\transform.html <svg xmlns=" xmlns:xlink=" xml:space="preserve" width="400" height="400" viewbox=" " > <g transform="scale(5) translate(15, 15) rotate(20) skewx(20) skewy(5)" > <rect x="10" y="10" width="5" height="5" fill="firebrick" /> <circle r="10" fill="seagreen" stroke="blue"/> <rect x="5" y="5" width="12" height="2" fill="gray" stroke="silver"/> </g> 10

11 Vágás(clipping) Vágás=Egy kép részeinek eltüntetése, melyek egy adott területen kívül esnek A határoló terület olyan egyszerű lehet int egy téglalap, de akár egy komplex útvonal is definiálhatja A következő első példában csak egy objektumot vágunk, a másodikban már valamennyit egy máromszöggel <defs> svg\clip1.html <rect id="r1" width="150" height="150" stroke="black" stroke-width="1"/> <circle id="r2" cx="100" cy="100" r="100" stroke="black" stroke-width="1"/> <circle id="r3" cx="100" cy="100" r="100" stroke="black" stroke-width="1"/> <radialgradient id="g1" cx="50%" cy="50%" r="50%" fx="25%" fy="25%"> <stop stop-color="black" offset="0%"/> <stop stop-color="teal" offset="50%"/> <stop stop-color="white" offset="100%"/> </radialgradient> <clippath id="clip1"> <path d="m 0 0 L L Z"/> </clippath> <g> <use x="250" y="0" xlink:href="#r1" fill="url(#g1)" clip-path="url(#clip1)"/> <use x="350" y="150" xlink:href="#r2" fill="url(#g1)"/> <use x="580" y="50" xlink:href="#r3" fill="url(#g1)"/> </g> svg\clip2.html... <g clip-path = "url(#clip1)"> <use x = "250" y = "0" xlink:href = "#r1" fill = "url(#g1)"/> <use x = "350" y = "150" xlink:href = "#r2" fill = "url(#g1)"/> <use x = "580" y = "50" xlink:href = "#r3" fill = "url(#g1)"/> </g> Maszkolás Analóg a vágással, de a vágásnál a vágófelület teljesen átlátszatlan, maszkolásnál default értéke teljesen átlátszó A default érték helyett tetszőleges átlátszóság adható meg Érdekesebb példa: svg\clip.html 11

12 <defs> svg\mask1.html <lineargradient id="grad" gradientunits="userspaceonuse" x1="0" y1="0" x2="800" y2="0"> <stop offset="0" stop-color="white" stop-opacity="0" /> <stop offset="1" stop-color="white" stop-opacity="1" /> </lineargradient> <mask id="mask" maskunits="userspaceonuse" x="0" y="0" width="800" height="300"> <rect x="0" y="0" width="800" height="300" fill="url(#grad)"/> </mask> <text id="text" x="400" y="200" font-family="verdana" font-size="100" text-anchor="middle" > Masked text </text> <rect x="0" y="0" width="800" height="300"fill="#ff8080"/> <use xlink:href="#text" fill="blue" mask="url(#mask)" /> <use xlink:href="#text" fill="none" stroke="black" stroke-width="2" /> JavaScript az svg állományban Az svg objektumokon fellépő események a html elemeken fellépőkhöz hasonlóan kezelhetők A DOM használatával a meglévő objektumok jellemzői módosíthatók, új objektumok létrehozhatók, s meglévők megszüntethetők Példa: svg1/dominsvg/1.svg <?xml version="1.0" encoding="iso "?> <svg xmlns=" version="1.1" width="400" height="300"> <script type="text/javascript"> <![CDATA[ var svgns = " function makeshape(evt) { if ( window.svgdocument == null ) svgdocument = evt.target.ownerdocument; var shape = svgdocument.createelementns(svgns, "ellipse"); shape.setattributens(null, "id", "ellipse1"); shape.setattributens(null, "cx", 185); shape.setattributens(null, "cy", 125); shape.setattributens(null, "rx", 125); shape.setattributens(null, "ry", 60); shape.setattributens(null, "fill", "red"); shape.setattributens(null, "onclick", "clears(evt)"); svgdocument.documentelement.appendchild(shape); var txt = svgdocument.createelementns(svgns, "text"); txt.setattributens(null, "x", 95); txt.setattributens(null, "y", 135); txt.setattributens(null, "font-size", 24); txt.setattributens(null, "font-family", "Comic San Serif MS"); txt.setattributens(null, "fill", "white"); svgdocument.documentelement.appendchild(txt); txt.appendchild(document.createtextnode( 'Click to remove')); function clears(evt){ evt.target.parentnode.removechild( evt.target.nextsibling); evt.target.parentnode.removechild(evt.target); function changecolor(evt){ try{ if(document.getelementbyid('ellipse1'). getattributens(null,'fill')=='red') document.getelementbyid('ellipse1'). setattributens(null,'fill','blue'); else 12

13 document.getelementbyid('ellipse1'). setattributens(null,'fill','red'); catch(e){alert('a célelem még nincs létrehozva!!!'); ]]> <rect x="0" y="0" rx="0" ry="0" width="400" height="300" fill="#dddddd" cursor="hand"/> <ellipse cx='100' cy='24' rx='76' ry='24' fill='#6699cc' stroke='none' onclick="makeshape(evt)"/> <ellipse cx='110' cy='24' rx='62' ry='20' fill='white' stroke='none' onclick="makeshape(evt)"/> <text x='62' y='32' fill='#6699cc' stroke='none' font-family='comic San Serif MS' font-size='20' onclick="makeshape(evt)" > Létrehozás </text> <ellipse cx='260' cy='24' rx='76' ry='24' fill='#6699cc' stroke='none' onclick="changecolor(evt)"/> <ellipse cx='270' cy='24' rx='62' ry='20' fill='white' stroke='none' onclick="changecolor(evt)"/> <text x='222' y='32' fill='#6699cc' stroke='none' font-family='comic San Serif MS' font-size='20' onclick="changecolor(evt)" > Színváltás </text> // Így is használható... function makeshape(evt) { var shape = document.createelementns(svgns, "ellipse"); shape.setattributens(null, "id", "ellipse1");... Kommunikáció a html és svg állomány között Csak embed elemmel beszúrt svg állomány esetével foglalkozunk Object és iframe elemel beszúrt esetben az IE-ben használt Adobe plugin korlátozza a lehetőségeket Bár FF esetén object és iframe esetén nincsennek korlátozások, ezekkel nem foglalkozunk Kommunikációs típusok Html-ből az svg-be Svg-ből a html-be Html-beli svg-k között Html svg kommunikáció - I. <html> svg1\htmtosvg\svgembedded\1.html <body> <script type="text/javascript"> function f_html() { window.f2_html("blue"); <h1>embedded svg</h1> <h2>html SVG<br> kommunikáció - I.</h2> <embed src="1.svg" width="200" height="200 style="background-color:gray;border-style:solid; border-width:2" type="image/svg+xml" > </embed> <form name="inputform"> <input type="button" value="vonal színváltás" style="width:200" onclick="window.f1_html('red')"> <br /> <input type="button" value="kitöltés színváltás" style="width:200" onclick="f_html()"> </form> </body> </html> 13

14 <svg height="200" width="200" onload="initialize(evt)" xmlns=" <script type="text/ecmascript"> <![CDATA[ SVGDocument = null; top.f1_html = f1_svg; // f1_svg exportálása a HTML-be top.f2_html = f2_svg; // f2_svg exportálása a HTML-be function Initialize(LoadEvent) { SVGDocument = LoadEvent.target.ownerDocument; function f1_svg(color) { SVGDocument.getElementById("colorCircle"). setattribute("stroke", color); function f2_svg(color) { SVGDocument.getElementById("colorCircle"). setattribute("fill", color); ]]> <circle id="colorcircle" cx="100" cy="100" r="50" fill="yellow" stroke="green" stroke-width="10"/> Html svg kommunikáció - II. <script type="text/javascript"> svg1\htmtosvg\svgembedded\2.html function f1(szin) { var o = document.embeds[0]; var oo = o.getsvgdocument(); oo.getelementbyid('colorcircle'). setattribute('stroke',szin); function f2(szin) { var o = document.embeds[0]; var oo = o.getsvgdocument(); oo.getelementbyid('colorcircle'). setattribute('fill',szin); <embed src="2.svg" width="200" height="200 style="background-color:gray;border-style:solid; border-width:2" type="image/svg+xml" > </embed> <form name="inputform"> <input type="button" value="vonal színváltás" onclick="f1('red')" style="width:200"> <br /> <input type="button" value="kitöltés színváltás" onclick="f2('blue')" style="width:200"> </form> Svg html kommunikáció - I. <svg height="200" width="200" xmlns=" <circle id="colorcircle" cx="100" cy="100" r="50" fill="yellow" stroke="green" stroke-width="10"/> <html> svg1\svgtohtml\svgembedded\1ieff.html <body bgcolor="green"> <script type="text/javascript"> function ChangeColor(newColor) { document.getelementbyid("div1").style.backgroundcolor = newcolor; <embed name="svg0" type="image/svg+xml" width="150" height="150" src="1.svg"> </embed> <div id="div1" style="position:relative; width:150;height:150;background-color:white;"> </div> </body> </html> 14

15 <svg xmlns=" xmlns:xlink=" <script type="text/ecmascript"> <![CDATA[ function talktohtml() { top.changecolor("blue"); ]]> <circle cx="50" cy="50" r="30" fill="blue" stroke="red" stroke-width="3" onclick="talktohtml()"/> <rect x="5" y="5" width="30" height="40" fill="yellow" stroke="green" stroke-width="3" onclick="parent.document.getelementbyid('div1'). style.backgroundcolor='yellow';"/> <rect x="65" y="65" rx="3" ry="3" width="30" height="30" fill="orange" stroke="green" stroke-width="3" onclick="top.document.getelementbyid('div1'). style.backgroundcolor='orange';"/> Svg html kommunikáció - II. <html> svg1\svgtohtml\svgembedded\2ieff.html <body bgcolor="green" > <embed name="svg0" src="2.svg" type="image/svg+xml" width="150" height="150"> </embed> <div id="div1" style="position:relative; width:150;height:150;background-color:white;"> </div> </body> </html> <svg xmlns=" xmlns:xlink=" <script type="text/ecmascript"> <![CDATA[ function talktohtml(szin) { top.document.getelementbyid("div1").style. backgroundcolor=szin; ]]> <circle cx="50" cy="50" r="30" fill="blue" stroke="red" stroke-width="3" onclick="talktohtml('blue')"/> <rect x="5" y="5" width="30" height="40" fill="yellow" stroke="green" stroke-width="3" onclick="talktohtml('yellow')"/> <rect x="65" y="65" rx="3" ry="3" width="30" height="30" fill="orange" stroke="green" stroke-width="3" onclick="talktohtml('orange')"/> Svg svg kommunikáció <html> svg1\svgtosvg\svgembedded\1ieff.html <body> <h2>cél svg</h2> <embed name="targetsvg" type="image/svg+xml" width="100" height="100" src="svg-target.svg"></embed> <h2>forrás svg</h2> <embed name="controlsvg" type="image/svg+xml" width="100" height="100" src="svg-control.svg"></embed> </body> </html> 15

16 // Forrás svg <svg xmlns=" xmlns:xlink=" <script type="text/ecmascript"> <![CDATA[ function TalkToSVG() { var targetsvg = top.document.embeds[0].getsvgdocument(); var targetelement = targetsvg.getelementbyid("colorrect"); targetelement.setattribute("fill", "orange"); ]]> <circle cx="50" cy="50" r="30" fill="blue" stroke="red" stroke-width="3" onclick="talktosvg()"/> <text x="50" y="100" style="fill:red; text-anchor:middle; "> click </text> // Cél svg <svg xmlns=" xmlns:xlink=" <rect id="colorrect" x="10" y="10" width="30" height="30" fill="green" stroke="blue" stroke-width="3" /> 16