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

问题描述 投票:-1回答:1

该网站本身 - 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 :).*/

什么有效:你可以通过点击“目录”中的“我的一些工作”和“介绍”来检查它在Edge和FF中的工作方式(也许在其他地方)。

并且js为那些找不到它并且给出了减去评分的人自己归档:http://test.vancebeckett.com/main.js

(或在FF中:检查元素 - 调试器 - main.js)

javascript google-chrome svg
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.