We try as far as possible to use standards based HTML5 api's to interact with elements. This helps us use the content **outside** of the wiki environment.
- Linking – SVG 1.1 - w3.org 
Currently in the clickable svg demo we are using an `onclick` event to trap for interacting with the svg. This does not require any markup such as adding links to the svg.
Follow these links to explore svg interaction n wiki: - MountainStorm and Load external SVG - Clickable SVG - SVG Links - Interactive Sofi SVG - Observable SVG
However, we may wish to craft svg's that contain some nodes with links and others without. In the example below the orange ovals may link to pages, while the green ones do something else.
http://livecode.world/assets/graph/livecode.html
HEIGHT 300
In this example we attach "url" links to the svg in the export from graphviz. See in full screen
The way this is done with graphviz and with svgs is to attach url's to nodes - the browser then enables interactions in a standard manor - using `<a xlink:href>` links. Let's look for way to leverage this, as this will allow us to customise the style of links using our existing tool-chains in more powerful ways.
Graphviz exports nodes with links in the following manor:
<a xlink:href="xxx" xlink:title="row_GetDataAbove"> <ellipse fill="GreenYellow" stroke="#008b00" cx="323" cy="-34" rx="77.4275" ry="13.9375"> </ellipse> <text text-anchor="middle" x="323" y="-30.3" font-family="Times,serif" font-size="14.00">row_GetDataAbove</text>
The next step is to enable differeent types of interaction depending on the node clicked (and the style of that node).
> Question: can we usefully use the url attribute here, or perhaps should we rely on another (non-semantic) attribute like `fill="GreenYellow"` to distinguish nodes and actions?
# Use addEventListener
According to this stackoverflow post, it look like we should not use `onlckick` but instead add an event listener along the lines of:
The better way to add interactivity to an svg seems to be to add and event listener rather than look for `onlick` events.
var el = document.getElementById('fil0'); el.addEventListener('click', function(){ this.style.fill="brown"; }, false);
You can see a working example of this heere on jsbin
Further more to get better consistency we may need to use Pointer Events (and add a little css) as described in this article - medium.com
In order to ensure the svg will never be the target of mouse event, the following css we can use pointer-events:
.local-anchor .icon { color: #3d7e9a; width: 16px; height: 16px; pointer-events: none; }
# Graph Assets
graph