SVG internal url links and iframes on wirecloud - iframe

Question

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 :-)

Answer 1

All the architecture of WireCloud is based on iframes. Those elements are used for providing the isolation between each of the widgets and operators and, currently, cannot be disabled. Moreover, the proposed alternative (webcomponents) is not matured enough to be a real alternative :(.
Anyway, WireCloud doesn't make use of the srcdoc attribute, so your problem rendering SVG images inside widgets should not be related to the linked question. The problem seems to be related to the use of the <base> element (which is injected by WireCloud into the HTML of the widget). See this answer for more details. We have created a ticket for analysing if we can remove the <base> element, but for now, you will have to use absolute URLs. E.g.:
var baseUrl = window.location.origin + window.location.pathname + window.location.search;
arc.setAttribute("fill", "url(" + baseUrl + "#MyGradient)");
This is the full code of my "SVG example widget":
var baseUrl = window.location.origin + window.location.pathname + window.location.search;
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, 'svg');
document.body.appendChild(svg);
var defs = document.createElementNS(svgns, "defs");
var linearGradient = document.createElementNS(svgns, "linearGradient");
linearGradient.setAttribute("id", "MyGradient");
defs.appendChild(linearGradient);
svg.appendChild(defs);
var stop = document.createElementNS(svgns, "stop");
stop.setAttribute("offset", "5%");
stop.setAttribute("stop-color", "green");
linearGradient.appendChild(stop);
stop = document.createElementNS(svgns, "stop");
stop.setAttribute("offset", "95%");
stop.setAttribute("stop-color", "gold");
linearGradient.appendChild(stop);
var rect = document.createElementNS(svgns, "rect");
rect.setAttribute("x", "10");
rect.setAttribute("y", "10");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "url(" + baseUrl + "#MyGradient)");