{"id":1316,"date":"2026-04-01T08:14:03","date_gmt":"2026-04-01T08:14:03","guid":{"rendered":"https:\/\/djoko.nl\/home6\/?p=1316"},"modified":"2026-07-01T12:17:50","modified_gmt":"2026-07-01T12:17:50","slug":"svg-interactief","status":"publish","type":"post","link":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/","title":{"rendered":"SVG interactief"},"content":{"rendered":"\n

Een SVG (Scalable Vector Graphic) is heel gemakkelijk interactief te maken. Hieronder zie je een voorbeeld waarbij elementen in de DOM een andere tekst krijgen.<\/p>\n\n\n\n

Brussels Hoofdstedelijk Gewest omvat 19 deelgemeenten<\/h6>\n

Klik op een deelgemeente<\/h4>\n

 <\/h6>\n\n\n \n \n

Stap 1: de SVG maken<\/h4>\n\n\n\n

Waarschijnlijk ga je niet zelf de code schrijven voor jouw SVG-afbeelding. Het kan wel (bekijk bijv. de tutorials op w3schools<\/a>), maar vanuit Illustrator bijv. gaat het vlugger. De kaart van Brussel die je hierboven ziet, komt van Wikipedia<\/a>. Dit SVG-bestand is in Illustrator via copy-paste wel wat \"opgeruimd\" (zie link onderaan de blog). Vooral belangrijk<\/strong>: ieder gebied heeft in venster Layers een unieke naam gekregen. In dit geval de naam van iedere deelgemeente.<\/p>\n\n\n\n

\"\"
Ieder pad krijgt in venster Lagen \/ Layers de naam vd deelgemeente<\/figcaption><\/figure>\n\n\n\n

Stap 2: bewaar als svg-bestand<\/h4>\n\n\n\n

Je kunt het natuurlijk eerst als Adobe Illustrator-document (met extentie .ai) bewaren, als je wilt. Maar we hebben een svg-bestand nodig, dus via 'bewaar als<\/em>' selecteer je SVG (sgv).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Stap 3: open een tekstverwerker<\/h4>\n\n\n\n

In een tekstverwerker (Atom bijv.) open je dit sgv-bestand. Je ziet bovenaan verwijzingen naar xml (svg is opgemaakt in xml) en Adobe Illustator (puur als commentaartekst), maar vooral het vastleggen van de stijl. In dit geval de kleur van de vulling ( hier een soort oud-roze: #f8c7c8) en de lijneigenschappen. Deze stijl geldt voor alle paden met de class \"st0\", dus alle paden in het sgv-bestand. Let ook op de id van het eerste pad: \" Brussel\". Eronder staan alle andere 18 paden met hun eigen (deelgemeente) naan.<\/p>\n\n\n\n

\"\"
In een tekstverwerker kun je de code aanpassen, bijv een typfout herstellen<\/figcaption><\/figure>\n\n\n\n

Je kunt dit sgv-bestand vanuit jouw browser openen om het te bekijkn.<\/p>\n\n\n\n

Stap 4: pas de style aan<\/h4>\n\n\n\n

In de tekstverwerker kun je de style van de paden aanpassen. Probeer bijv. het volgende:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

De kleur is nu wit (#fff) en met .st0:hover { } voeg je een rollover effect toe (niet zichtbaar op mobiele devices), hier met een tijdsduur van een halve seconde. Test jouw resultaat weer in jouw browser.<\/p>\n\n\n\n

Stap 5: maak er een html van<\/h4>\n\n\n\n

We gaan nu deze code insluiten in <html> en <\/html>. Bovenaan voegen we het begin toe (met <head><\/head> en <body>)plus een paar h3 en h2 elementen waar we zo gebruik van maken:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<head>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>Brussels Hoofdstedelijk Gewest met de 19 deelgemeenten<\/title>\n<\/head>\n<body>\n<h3>Brussels Hoofdstedelijk Gewest omvat 19 deelgemeenten<\/h3>\n<h2 id=\"info\">Klik op een deelgemeente<\/h2>\n<h3 id=\"info2\">&nbsp;<\/h3><\/code><\/pre>\n\n\n\n
Onderaan (na <\/svg> ) sluit je af met :<\/p>\n\n\n\n
<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Bewaar dit document nu onder de naam : index.html en open het in jouw browser.<\/p>\n\n\n\n
Stap 6: maak de paden interactief<\/h4>\n\n\n\n
Nu komt het leuke gedeelte. Tussen de <\/svg> en <\/body> voeg je een javascript toe. De code is niet ingewikkeld: de html-inhoud het element met id \"info\" en daaronder met de id \"info2\" wordt veranderd.<\/p>\n\n\n\n
<script>\ndocument.getElementById('Brussel').addEventListener('click', function() {\n  this.style.fill = 'yellow';\n  document.getElementById(\"info\").innerHTML = \"Dit is de stad Brussel\"\n  document.getElementById(\"info2\").innerHTML = \"ong. 198.000 inwoners\"\n});\n<\/script> <\/code><\/pre>\n\n\n\n
Breid dit script uit voor het pad van Jette:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Als je dit test in de browser, zul je zien dat de knoppen geel blijven. (je zult misschien even moeten zoeken waar stad Brussel en Jette liggen ;-)...). Tijd voor de laatste stap.<\/p>\n\n\n\n
Stap 6<\/h4>\n\n\n\n
Er zijn vast ook andere methoden om dit op te lossen. Hier kiezen we voor een reset-functie die alle paden weer wit maakt:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Je zit in regel 95 dat de reset-functie eerst wordt opgeroepen bij het pad van Brusssel. Dit moet je dus ook bij alle andere paden doen. Hieronder staat de code om te kopieren:<\/p>\n\n\n\n
function reset(){\n    const collection = document.getElementsByClassName(\"st0\");\n    for (let i=0; i<collection.length; i++){\n      collection[i].style.fill=\"#fff\";\n    }\n  }<\/code><\/pre>\n\n\n\n
Alle elementen met de class-naam \"st0\" worden opgeslagen in de array collection. Met de (hopelijk voor jou bekende for-loop) worden alle paden (met class \"st0\") weer wit gemaakt.<\/p>\n\n\n\n
We zijn klaar<\/h4>\n\n\n\n
Hier vind je de code terug <\/a>van bovenstaande bestanden. Hopelijk kun je zelf experimenteren met eigen clickable maps. De kaart van Brussel kun je ook hier<\/a> bekijken in een los tabblad.<\/p>\n\n\n\n
Laat maar weten of deze blog nuttig \/ leuk was. Veel plezier!<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Een SVG (Scalable Vector Graphic) is heel gemakkelijk interactief te maken. Hieronder zie je een voorbeeld waarbij elementen in de DOM een andere tekst krijgen. Brussels Hoofdstedelijk Gewest omvat 19 deelgemeenten Klik op een deelgemeente  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,13],"tags":[],"class_list":["post-1316","post","type-post","status-publish","format-standard","hentry","category-programmeren","category-visueel-ontwerp"],"yoast_head":"\nSVG interactief - djoko<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG interactief - djoko\" \/>\n<meta property=\"og:description\" content=\"Een SVG (Scalable Vector Graphic) is heel gemakkelijk interactief te maken. Hieronder zie je een voorbeeld waarbij elementen in de DOM een andere tekst krijgen. Brussels Hoofdstedelijk Gewest omvat 19 deelgemeenten Klik op een deelgemeente  \" \/>\n<meta property=\"og:url\" content=\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/\" \/>\n<meta property=\"og:site_name\" content=\"djoko\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-01T08:14:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-01T12:17:50+00:00\" \/>\n<meta name=\"author\" content=\"Jean-Fran\u00e7ois Roebers\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jean-Fran\u00e7ois Roebers\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/\"},\"author\":{\"name\":\"Jean-Fran\u00e7ois Roebers\",\"@id\":\"https:\/\/djoko.nl\/home6\/#\/schema\/person\/f3d259e86ce771777335741dba143a1c\"},\"headline\":\"SVG interactief\",\"datePublished\":\"2026-04-01T08:14:03+00:00\",\"dateModified\":\"2026-07-01T12:17:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/\"},\"wordCount\":619,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/djoko.nl\/home6\/#\/schema\/person\/f3d259e86ce771777335741dba143a1c\"},\"articleSection\":[\"programmeren\",\"visueel ontwerp\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/\",\"url\":\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/\",\"name\":\"SVG interactief - djoko\",\"isPartOf\":{\"@id\":\"https:\/\/djoko.nl\/home6\/#website\"},\"datePublished\":\"2026-04-01T08:14:03+00:00\",\"dateModified\":\"2026-07-01T12:17:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/djoko.nl\/home6\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG interactief\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/djoko.nl\/home6\/#website\",\"url\":\"https:\/\/djoko.nl\/home6\/\",\"name\":\"djoko\",\"description\":\"reflectie op creatie van beeld, woord en muziek\",\"publisher\":{\"@id\":\"https:\/\/djoko.nl\/home6\/#\/schema\/person\/f3d259e86ce771777335741dba143a1c\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/djoko.nl\/home6\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/djoko.nl\/home6\/#\/schema\/person\/f3d259e86ce771777335741dba143a1c\",\"name\":\"Jean-Fran\u00e7ois Roebers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/djoko.nl\/home6\/wp-content\/uploads\/2025\/09\/djoko_logo.jpg\",\"url\":\"https:\/\/djoko.nl\/home6\/wp-content\/uploads\/2025\/09\/djoko_logo.jpg\",\"contentUrl\":\"https:\/\/djoko.nl\/home6\/wp-content\/uploads\/2025\/09\/djoko_logo.jpg\",\"width\":148,\"height\":48,\"caption\":\"Jean-Fran\u00e7ois Roebers\"},\"logo\":{\"@id\":\"https:\/\/djoko.nl\/home6\/wp-content\/uploads\/2025\/09\/djoko_logo.jpg\"},\"description\":\"Mijn interesse in vormgeving en ontwerpen in het algemeen, gebruik van programmeertalen en digitaal gereedschap, relaties met geschiedenis en wiskunde, combineer ik in deze blog.\",\"sameAs\":[\"http:\/\/djoko.nl\/home6\",\"https:\/\/www.linkedin.com\/in\/jean-franois-roebers-a14408\/\"],\"url\":\"https:\/\/djoko.nl\/home6\/index.php\/author\/jean_admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SVG interactief - djoko","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/","og_locale":"nl_NL","og_type":"article","og_title":"SVG interactief - djoko","og_description":"Een SVG (Scalable Vector Graphic) is heel gemakkelijk interactief te maken. Hieronder zie je een voorbeeld waarbij elementen in de DOM een andere tekst krijgen. Brussels Hoofdstedelijk Gewest omvat 19 deelgemeenten Klik op een deelgemeente  ","og_url":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/","og_site_name":"djoko","article_published_time":"2026-04-01T08:14:03+00:00","article_modified_time":"2026-07-01T12:17:50+00:00","author":"Jean-Fran\u00e7ois Roebers","twitter_card":"summary_large_image","twitter_misc":{"Geschreven door":"Jean-Fran\u00e7ois Roebers","Geschatte leestijd":"5 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/#article","isPartOf":{"@id":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/"},"author":{"name":"Jean-Fran\u00e7ois Roebers","@id":"https:\/\/djoko.nl\/home6\/#\/schema\/person\/f3d259e86ce771777335741dba143a1c"},"headline":"SVG interactief","datePublished":"2026-04-01T08:14:03+00:00","dateModified":"2026-07-01T12:17:50+00:00","mainEntityOfPage":{"@id":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/"},"wordCount":619,"commentCount":0,"publisher":{"@id":"https:\/\/djoko.nl\/home6\/#\/schema\/person\/f3d259e86ce771777335741dba143a1c"},"articleSection":["programmeren","visueel ontwerp"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/","url":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/","name":"SVG interactief - djoko","isPartOf":{"@id":"https:\/\/djoko.nl\/home6\/#website"},"datePublished":"2026-04-01T08:14:03+00:00","dateModified":"2026-07-01T12:17:50+00:00","breadcrumb":{"@id":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/djoko.nl\/home6\/index.php\/2026\/04\/01\/svg-interactief\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/djoko.nl\/home6\/"},{"@type":"ListItem","position":2,"name":"SVG interactief"}]},{"@type":"WebSite","@id":"https:\/\/djoko.nl\/home6\/#website","url":"https:\/\/djoko.nl\/home6\/","name":"djoko","description":"reflectie op creatie van beeld, woord en muziek","publisher":{"@id":"https:\/\/djoko.nl\/home6\/#\/schema\/person\/f3d259e86ce771777335741dba143a1c"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/djoko.nl\/home6\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":["Person","Organization"],"@id":"https:\/\/djoko.nl\/home6\/#\/schema\/person\/f3d259e86ce771777335741dba143a1c","name":"Jean-Fran\u00e7ois Roebers","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/djoko.nl\/home6\/wp-content\/uploads\/2025\/09\/djoko_logo.jpg","url":"https:\/\/djoko.nl\/home6\/wp-content\/uploads\/2025\/09\/djoko_logo.jpg","contentUrl":"https:\/\/djoko.nl\/home6\/wp-content\/uploads\/2025\/09\/djoko_logo.jpg","width":148,"height":48,"caption":"Jean-Fran\u00e7ois Roebers"},"logo":{"@id":"https:\/\/djoko.nl\/home6\/wp-content\/uploads\/2025\/09\/djoko_logo.jpg"},"description":"Mijn interesse in vormgeving en ontwerpen in het algemeen, gebruik van programmeertalen en digitaal gereedschap, relaties met geschiedenis en wiskunde, combineer ik in deze blog.","sameAs":["http:\/\/djoko.nl\/home6","https:\/\/www.linkedin.com\/in\/jean-franois-roebers-a14408\/"],"url":"https:\/\/djoko.nl\/home6\/index.php\/author\/jean_admin\/"}]}},"_links":{"self":[{"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/posts\/1316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/comments?post=1316"}],"version-history":[{"count":19,"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/posts\/1316\/revisions"}],"predecessor-version":[{"id":1384,"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/posts\/1316\/revisions\/1384"}],"wp:attachment":[{"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/media?parent=1316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/categories?post=1316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/djoko.nl\/home6\/index.php\/wp-json\/wp\/v2\/tags?post=1316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}