iframe - Wirecloud 上の SVG 内部 URL リンクと iframe

Question

Wirecloud は iframe を使用してウィジェットの html をレンダリングします。これは、内部定義への参照を必要とする一部の高度な svg 機能で問題を引き起こすようです (このディスカッションも参照してください)。

svg を生成する js コードは、単一ページ アプリまたは 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);");

svg オブジェクトが作成されたときに適切にリンクされていないのは参照 (ここでは #linearGradient へ) です (作成されたグラフィックスを検査するとき、fill 属性は null です)。

通常、svg では単に url(#reference) を使用します。SOの他の場所で提案されているように、回避策として「about:blank」と「about:srcdoc」を試しましたが、どういうわけかうまくいかないようです(chrome / firefox)

これは svg / iframe (wirecloud 固有ではない) の問題のようですが、これを確認するために、wirecloud の外部の iframe で svg をレンダリングしようとはしていません。

回避策がない場合、javascript を使用してプログラムで wirecloud ウィジェット内でレンダリングできる SVG グラフィックのタイプが制限されます。おそらく、svg を埋め込む他の方法のいくつかは機能するでしょう (サーバーからフェッチする) が、インタラクティブなウィジェットの最適な設計ではないか、iframeの代替手段になる可能性があります:-)