Встроенный iframe в элементе SVG - PullRequest
Новая
       26

Встроенный iframe в элементе SVG

2 голосов
/ 30 июня 2011

Проблема, с которой я столкнулся, заключается в том, что я пытаюсь встроить iframe в элемент svg, используя jquery, и не могу получить нарисованный iframe.Вот пример переполнения стека, очень похожий на тот, который я хочу, за исключением того, что я хотел бы просто отобразить HTML-фрагмент:

Возможно встроить видео YouTube в 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);
    }

По сути, этот код использует несколько моих предварительно созданных функций (addSvgElementFromJson), чтобы добавить элементы в корень SVG, который уже присутствует вхолст.Я просто использую фиктивную ссылку, чтобы увидеть, появится ли рамка.Во время выполнения, когда я вызываю функцию, ошибок нет, и раздел svg обновляется правильно, но ничего не отображается.

Вот svg, обновленный с помощью iframe и нескольких других объектов: 

    <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 ничего не отображается.Буду признателен за любую помощь.

Обновление: перемещая элемент чужого объекта внутри начальной группы, я могу получить его для рисования, но он пуст.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>

Ответы [ 2 ]

1 голос
/ 16 января 2014

Из D3.js я смог использовать javascript для добавления iframe к иностранному объекту, используя контейнер xhtml 

var the_container=the_foreignObject.append("xhtml:body")

var the_iframe.append("iframe")
    .attr("src", function(d) {
        the_url="http://bl.ocks.org/mbostock/raw/1256572";
        return the_url;
    })
    .attr("width", background_width)
    .attr("height", background_height/2)
    .attr("frameborder","0")
;
1 голос
/ 29 июля 2011

В итоге я просто поместил div вокруг своей страницы с нужной панелью инструментов. Не нужно было ничего рисовать в SVG для панели инструментов. Работает намного лучше с плавающим div.

Обновление - для тех, кто хочет достичь моей первоначальной цели, нужно использовать jQuery для добавления узла иностранного объекта в пространстве имен SVG к базе SVG.

...