Allow specifying the "target" attribute for links in SVG elements

[kostmo]

To make embedded hyperlinks (created via the href function) in an SVG clickable within a web page, the <object data="path-to-file.svg"> element must be used instead of the <img src="path-to-file.svg"> element. The links are not clickable if the <img> element is used, although if the SVG file is opened on its own in a new browser tab (outside of embedding in a HTML page), the links are clickable.

However, when using the <object> element, the SVG element exists in its own "iframe". If a hyperlink is clicked, only the iframe content changes, rather than navigating the root page to the link destination.

This behavior can be overridden with the target="_top" attribute (see StackOverflow answer). However, since I haven't seen a way to specify the target attribute via the diagrams API, I ended up modifying the <a> elements in the SVG dynamically when the page loads:

var svg_element = document.getElementById("my-svg-element");
var svg_document = svg_element.contentDocument;

var anchor_elements = svg_document.getElementsByTagName("a");
for (var i=0; i<anchor_elements.length; i++) {
    anchor_elements[i].setAttribute("target", "_top");
}

Note that this dynamic solution does not work when testing locally, due to browser security policy; in Chrome, I observe the following error message:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

This can be bypassed by executing Google Chrome with the --allow-file-access-from-files command-line option.