Внутренние URL-ссылки и фреймы SVG на wirecloud

Wirecloud использует iframe для отображения html виджетов. Похоже, это создает проблемы для некоторых расширенных функций SVG, которые требуют ссылок на внутренние определения (см. также это обсуждение).

Код js, создающий svg, отлично работает в одностраничном приложении или представлении django. Сообщений об ошибках нет.

Весь код слишком велик, чтобы публиковать его здесь, но ключевые важные элементы:

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

затем типичное определение (например, градиент):

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

и, наконец, использование определения

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

Это ссылка (здесь на #linearGradient), которая не связана должным образом при создании объекта svg (при проверке созданной графики атрибут fill имеет значение null)

Обычно в svg вы просто используете url(#reference). Пробовали "about:blank" и "about:srcdoc" в качестве обходных путей, как было предложено в другом месте на SO но почему-то они не работают (хром/фаерфокс)

Кажется, это проблема с svg / iframe (не специфичным для wirecloud), но я не пытался визуализировать svg в iframe вне wirecloud, чтобы подтвердить это.

Если нет обходного пути, это ограничит тип графики SVG, которая может быть отображена в виджете wirecloud программно с использованием javascript. Возможно, сработают некоторые другие способы встраивания svg (получение его с сервера), но это не оптимальный дизайн для интерактивных виджетов, или, может быть, iframe альтернативный :-)


svg iframe fiware fiware-wirecloud
person philippos    schedule 21.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вся архитектура WireCloud основана на iframes. Эти элементы используются для обеспечения изоляции между каждым из виджетов и операторов и в настоящее время не могут быть отключены. Более того, предлагаемая альтернатива (веб-компоненты) недостаточно созрела, чтобы быть реальной альтернативой :(.

В любом случае, WireCloud не использует атрибут srcdoc, поэтому ваша проблема с отображением изображений SVG внутри виджетов не должна быть связана со связанным вопросом. Проблема, похоже, связана с использованием элемента <base> (который вставляется WireCloud в HTML-код виджета). См. этот ответ для более подробной информации. Мы создали тикет для анализа возможности удаления элемента <base>, но пока , вам придется использовать абсолютные URL-адреса. Например.:

var baseUrl = window.location.origin + window.location.pathname + window.location.search;

arc.setAttribute("fill", "url(" + baseUrl + "#MyGradient)");

Это полный код моего "пример виджета SVG":

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)");
person Álvaro Arranz    schedule 22.04.2016
comment
Обновили вопрос с более актуальной информацией. Надеюсь также попробовать код вне wirecloud, чтобы убедиться, что это проблема с iframe. - person philippos; 25.04.2016
comment
Да, абсолютная ссылка работает, и (например) внутренние ссылки svg на градиенты, таким образом, правильно связаны и правильно отображаются в виджете. Большое спасибо за предложение этого решения - person philippos; 11.05.2016