4

如何在一页中使用 svg 图像数据制作克隆标签对象。没有很多获取服务器的方法。目标页面示例

<!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 的许多获取请求。第一个请求显示结果 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 发送以下获取请求。

我怎么能在 html 中做到这一点，wo js。是否可以通过相对 uri ~like xpath 从当前页面接收数据。

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

使用 document.querySelector("...") 等元素进行构造。contentWindow/contentDocument/document/window/innerHTML = ... 没有用。

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

4

2 回答 2

0

是的。可以创建cloneofobject tag并且您可以使用它clone。请按照演示链接。

演示

于 2015-05-06T06:13:08.573 回答
0

我找到了下一个解决方案，使用框架 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["..."] 在 svg 中模拟声明

于 2015-05-07T06:08:54.073 回答