Question

如何在一个页面中使用svg图像数据制作克隆标记对象。没有很多get方法到服务器。目标页面样本

<!DOCTYPE html>
...
<object id="tg0" data="graph.svg" type="image/svg+xml" some_my_value="234"></object>
<object id="tg1" data="graph.svg" type="image/svg+xml" some_my_value="123"></object>
...

此示例获取graph.svg，其中包含许多对graph.svg的get请求。第一个请求显示结果200以下所有显示结果304，但我需要没有以下一次。

我找到了attr声明，但是下一个代码在＃tg1中不能使用attr数据。

<object declare id="tg0" data="graph.svg" type="image/svg+xml"></object>
<object id="tg1" type="image/svg+xml">
    <param valuetype="object" value="#tg0">
</object>

使用数据attr，tg1发送以下get请求。

我怎样才能在html，wo js中这样做。是否可以通过相对uri~像xpath那样从当前页面接收数据。

graph.svg是自渲染图像。它可以在div中的阴影根（它现在不是变体）中工作。如果可以是一种方式 - 使用JS，我如何将XMLHttpRequesst结果放入标记对象的文档中？

使用document.querySelector（“...”）等元素构造。 contentWindow / contentDocument / document / window / innerHTML = ... 没有whork。

如果js - 需要纯js wo jquery和其他框架中的解决方案。火狐/铬。

Answer 1

是。可以创建clone object tag，您可以使用clone。请按照演示链接。

<强> DEMO

Answer 2

我找到了下一个解决方案，带有框架DOM

<object id="tg0" data="graph.svg" type="image/svg+xml"></object>
<!--tg0 can be iframe-->

<iframe id="tg1" class="tg" type="image/svg+xml"></iframe>
<object id="tg2" class="tg" type="image/svg+xml"></object>
<!--iframe Firefox and Chrome; object work in Chrome only-->    

<script>
    //some control to onload current page and #tg0

    //We can get data from tag object or iframe
    var tg0_TXT=window.frames['tg0'].contentDocument.rootElement.outerHTML;

    //Or get it from XMLHttpRequest
    var dataReq = new XMLHttpRequest();
    //...
    var tg0_TXT=dataReq.responseText;


    var trgIframes=document.querySelectorAll(".tg");
    for(var ic0=0; ic0<trgIframes.length; ic0++) {
        //Select id, because window.frames works with id
        var idc=trgIframes[ic0].id;

        //Firefox doesnt want write in empty contentDocument in object
        //so #tg2 in Firefox is empty
        if(window.frames[idc].contentDocument) {
            //wo open/close scripts inside svg doesn't starts
            window.frames[idc].contentDocument.open(); 
            window.frames[idc].contentDocument.write( tg0_TXT );
            window.frames[idc].contentDocument.close();
        }
    }
};
</script>

我们可以使用frameElement.declare和window.parent.frames [＆＃34; ...＆＃34;]

模拟svg中的声明

如何使用一个get方法克隆标记对象？

2 个答案: