1
問題は、jqueryを使用してsvg要素内にiframeを埋め込もうとしているため、iframeを取得できません。ここで私が望むものと非常に似てスタックオーバーフローからの例では、それは単にHTMLスニペットを表示したいと思い除き、次のとおりです。SVG要素内に埋め込まれたiframe
Possible to embed a youtube video in an svg?
私のjqueryのコードは、このようなものです
function showTextToolbar(selectedGroup){
console.log("here");
var x = +$($(selectedGroup).children().get(0)).attr("x");
var y = +$($(selectedGroup).children().get(0)).attr("y") - 30;
console.log(x);
console.log(y);
var newFOSvg = svgEditor.canvas.addSvgElementFromJson({
"element": "foreignobject",
"id": "textTool",
"attr":{
"x":x,
"y":y,
"width":"360",
"height":"30"
}
});
var newIframeSvg = svgEditor.canvas.addSvgElementFromJson({
"element": "iframe",
"attr":{
"width":"360",
"height":"30",
"src":"http://www.google.com",
"xmlns":"http://www.w3.org/1999/xhtml"
}
});
newFOSvg.appendChild(newIframeSvg);
canv.getElem("svgcontent").appendChild(newFOSvg);
}
基本的に、このコードでは、既にキャンバスに存在するsvgルートに要素を追加するために、いくつかの既成関数（addSvgElementFromJson）を使用しています。フレームが表示されるかどうかを確認するためにダミーリンクを使用しています。実行時に関数を呼び出すと、エラーはなく、svgセクションは正しく更新されますが、何も表示されません。ここで
はインラインフレームやその他のオブジェクトのカップルで更新SVGです：<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<g id="0ea5f198be28b719853b18c7390003e7">
<rect id="svg_1" width="350" height="50" fill="#ffffff" stroke="#22C" stroke-width="0.5" x="20" y="40"/>
</g>
</g>
<foreignobject height="30" width="360" y="10" x="20">
<iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.google.com" height="30" width="360"/>
</foreignobject>
</svg>
は私が適切に埋め込むためのiframeを得ているように見えるが、何も私のSVGキャンバス上に表示されません。どんな助けもありがとう。
更新：最初のグループの内部でforeignobject要素を移動することで、描画することができますが空です。 iframeはまだ表示されていません。また、埋め込まれたIFRAMEでダミーページを作成することによって、私はIFRAMEの内容を見ることができる午前：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Frameset//EN">
<html>
<body>
<iframe src="test.svg" width="600" height="600"></iframe>
</body>
</html>
そしてtest.svgが含まれています
<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<g id="0ea5f198be28b719853b18c739002923" name="text_free">
<rect y="40" x="20" stroke-width="0.5" stroke="#22C" fill="#ffffff" height="50" width="350" name="border"/>
<text y="60" x="40" xml:space="preserve" text-anchor="left" font-family="serif" font-size="12" name="data" opacity="100" stroke-width="0" stroke="#000000" fill="#000000"></text>
</g>
<g id="0ea5f198be28b719853b18c7390003e7" name="text_free">
<rect y="90" x="20" stroke-width="0.5" stroke="#22C" fill="#ffffff" height="50" width="350" name="border"/>
<text y="110" x="40" xml:space="preserve" text-anchor="left" font-family="serif" font-size="12" name="data" opacity="100" stroke-width="0" stroke="#000000" fill="#000000"></text>
</g>
<foreignObject height="500" width="500" y="200" x="70">
<iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.google.com" height="500" width="500"/>
</foreignObject>
</g>
</svg>
のforeignObjectにはiframeを追加するためにJavaScriptを使用することができました。私はドキュメント内にsvg要素を埋め込んでいて、svgの中に別のhtml要素を埋め込んでいたため、コンテンツがブロックされているようです。私の特定のケースでは、iframeは私の問題にとって最良の解決策ではありませんでした。 – Jlange
だから何が解決策でしたか？ –
私は、私が望むツールバーで私のページの周りにdivを浮かべてしまった。ツールバーのsvgに何かを描画する必要はありませんでした。フローティングディビジョンでもっとうまく動作します。 – Jlange