Created question in FIWARE Q/A platform on 21-04-2016 at 17:04
Please, ANSWER this question AT http://stackoverflow.com/questions/36774188/svg-internal-url-links-and-iframes-on-wirecloud

Question:
SVG internal url links and iframes on wirecloud

Description:
Wirecloud uses iframes to render the html of widgets. This seems to create problems for some advanced svg features that require references to internal definitions (see also this discussion).

The js code producing the svg works fine in single page app or django view.
There are no error messages.

The entire code is too big to post here, but the key relevant elements are:

var canvas = document.getElementById("canvas");
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, 'svg');

then a typical definition (for example a gradient):

var defs = document.createElementNS(svgns, "defs");
var linearGradient = document.createElementNS(svgns, "linearGradient");

and finally the use of the definition

arc.setAttribute('style', "fill:url(about:srcdoc#linearGradient);");

It is the reference (here to #linearGradient) that is not properly linked to when the svg object is created (when inspecting the created graphics the fill attribute is null)

Normally in svg you just use url(#reference). Have tried "about:blank" and "about:srcdoc" as workarounds as suggested elsewhere on SO but somehow they don't seem to work (chrome / firefox)

This seems to be an issue with svg / iframe (not wirecloud specific) but I have not tried to render the svg in iframe outside wirecloud to confirm this.

If there is no workaround this would limit the type of svg graphics that can be rendered within a wirecloud widget programmatically using javascript. Maybe some of the other ways of embedding svg would work (fetching it from the server) but its not optimal design for interactive widgets, or maybe an iframe alternative