[SVG] Hoe een link (gedefinieerd in defs) te implementeren?

Pagina: 1
Acties:

  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Topicstarter
Momenteel ben ik bezig om mijn SVG kennis aan het vergroten. Voorheen altijd met andere zaken bezig geweest en zijdelings met SVG betrokken geweest.
offtopic:
De enige topics die dus ook over SVG te vinden zijn heb ik ofwel geopend ofwel heb ik er al in gereageerd


Nu heb ik een volgend voorbeeld weten te produceren:

http://verwijderddomain.nl/GoT/svg/
(Om het voorbeeld te bekijken met je wel de Adobe SVG plugin hebben geïnstalleerd, deze is hier: http://www.adobe.com/svg te downloaden)

Dit bestaat uit de volgende code:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600px" height="600px" viewBox="0 -295 1300 1300">

 <title>Test voor GoT</title>
  <desc>
    Dit is een test om te kijken of het linken naar een in defs
    gedefinieerde link mogelijk is...
  </desc>
  <defs>
    <style type="text/css">
     <![CDATA[
  text, tspan   {
   font-size   : 22px;
   fill        : white;
  }
  ]]>
 </style>
 <text id="voornaam">Piet</text>
 <text id="achternaam">KLAASSEN</text> 
 <text id="url_link">http://www.tweakers.net</text>
  </defs>

  <g id="generation">
    <circle style="fill: blue; stroke: red" cx="200" cy="200" r="100"/>
     <a xlink:href="#url_link">
     <text x="120px" y="205px">
       <tspan>
        <tref xlink:href="#voornaam" />
       </tspan>
       <tspan>
        <tref xlink:href="#achternaam" />
       </tspan>
     </text>
     </a>
  </g>
</svg>


Zoals jullie kunnen zien worden de voornaam en achternaam middels een #ID verwijzing opgehaald uit het defs gedeelte. Dat werkt dus zoals het moet werken.

Nou wil ik ook graag dat ik de URL Link verwijzing kan ophalen vanuit het defs gedeelte. Weet iemand hoe ik dit voor elkaar kan krijgen? Want nu krijg ik dus alleen maar een directe verwijzing naar het id en dat is niet echt de bedoeling...

[ Voor 32% gewijzigd door Woudloper op 18-09-2005 23:08 ]


  • HawVer
  • Registratie: Februari 2002
  • Laatst online: 24-08 22:06
Klopt het dat mijn internet explorer erop vast loopt?

http://hawvie.deviantart.com/


  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Topicstarter
HawVer schreef op 29 januari 2003 @ 13:16:
Klopt het dat mijn internet explorer erop vast loopt?
Nee, dat niet! Maar je moet hiervoor wel de Abode SVG plugin hebben geïnstalleerd.

Deze is hier te downloaden:

http://www.adobe.com/svg

Verwijderd

Moet je niet een event aanmaken, of anders de link aan voornaam hangen.

Waar zou je op moeten klikken om doorgelinkt te worden?

  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Topicstarter
Verwijderd schreef op 29 januari 2003 @ 14:03:
Moet je niet een event aanmaken, of anders de link aan voornaam hangen.

Waar zou je op moeten klikken om doorgelinkt te worden?
Als je op de naam klikt moet je gewoon doorgelinkt worden (in het voorbeeld dan) naar Tweakers.net.

Het uiteindelijke resultaat moet ervoor zorgen dat bij onderstaande link:

http://verwijderddomain.nl/GoT/svg/index2.html

Je per persoon op zijn gebied kan klikken en wordt doorverwezen naar een detail pagina met extra informatie (het is namelijk ten behoeve van stamboom onderzoek).

[ Voor 3% gewijzigd door Woudloper op 18-09-2005 23:08 ]


Verwijderd

Misschien met Javascript erbij, of is dat niks.

een voorbeeld
http://www.oculismedia.com/proplive_svg/floorplan.html

  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Topicstarter
G-B :: Nou, met behulp van JavaScript heb ik er dus het volgende van kunnen maken:

http://verwijderddomain.nl/GoT/kwartier_cirkel.html

Dat is dus naar mijn idee dus goed gelukt. Maar helaas dat ik het dus niet voor elkaar heb kunnen krijgen middels interne references naar hetgeen dus in het defs stuk is gegenereerd zoals dat wel met voornaam/achternaam is gelukt!

Overigens nog een additionele vraag weet iemand wellicht of het mogelijk is om een bepaald gedeelte van een SVG object te vullen met een kleur. Als namelijk naar het bovengenoemde voorbeeld kijkt dan zie je in de source dat er cirkels en lijnen zijn getekend. Ik zou graag willen dat je een gebied tussen de cirkels/lijken opvult met een kleur...

Zelf heb ik daar tot op heden nog geen resultaat mee kunnen boeken, wellicht heeft iemand van jullie nog een suggestie?

[ Voor 3% gewijzigd door Woudloper op 18-09-2005 23:08 ]


Verwijderd

Ik ben nog bezig met iets anders maar heb in de toekomst (2 maanden) ook SVG nodig, ik heb wel al een vooronderzoek gedaan en een aantal links gevonden naar tutorials. Misschien dat je daar wat aan hebt.

http://dhtmlnirvana.com/svg/intro1.html
http://www.hendersonpetrophysics.com/SVG_Main.html
http://thevision.ws/svg/samples.htm

Hopelijk heb je hier wat aan
Pagina: 1