动态加载SVG(或任何东西)作为对象。 Chrome安全功能?

时间:2017-12-14 20:11:59

标签: javascript google-chrome svg

网站本身 - test.vancebeckett.com(它是一个阿尔法,我知道文本和其他一些东西现在很糟糕,它会重做)。

编辑: 什么不起作用(例子): 在JS文件中:

var p2ComicTileAttributes = ["class", "comicTiles p2Content", "id", "p2ComicTile", "type", "image/svg+xml", "data", "svg/p2Comic.svg", "onload", "p2Status++;p2Tiles.splice(0,1,this);"];
function loadPageSVGContent(attributesArray) {
    var pageObj = document.createElement("object");
    for (var i = 0; i < attributesArray.length; i += 2) {
        pageObj.setAttribute(attributesArray[i], attributesArray[i + 1]);
    }
    document.getElementById("contentLayout").appendChild(pageObj)
};
loadPageSVGContent(p2ComicTileAttributes);
/*This creates an objects, appends them in DOM, sets thair attributes and even runs thair inline code (onload) in Edge and FF, but do neither in Chrome-based browsers. Is this another Chrome safety feature? Like it can't load SVG's (or any other xml) from another domain and have an access to its DOM, it also doesn't allow do the same from local folder, only from the server. "contentLayout" - div-wrapper in HTML document.
So, maybe there's a way to use ajax and somehow pass loaded document to "data" attribute?
About performance, if I will inject SVG's in the html - these SVG's are 100-200KB each, and I have many. I'm sure it will slow down any DOM manipulations. And also I want to find the best way anyway :).*/

什么有效: 你可以点击&#34;我的一些工作&#34;来检查Edge和FF(也许是其他地方)的工作原理。和&#34;介绍&#34;在&#34;目录&#34;。

并且js会为那些无法找到并给出减值评分的人提交文件:http://test.vancebeckett.com/main.js

(或在FF:Inspect Element - Debugger - main.js)

1 个答案:

答案 0 :(得分:0)

好的,我终于解决了这个问题! 只需使用XMLHttpRequest加载.svg文件,当状态显示时,它已加载,创建一个&#34;对象&#34;带有&#34;数据的节点&#34;属性设置为&#34; path / to / your / image.svg&#34;并将它附加到DOM中的一些包装 - 中提琴!你有一个可以动画的svg元素,并且你的html中没有内联!