Javascript Google Chrome SVG数据URI_Javascript_Google Chrome_Dom_Svg

Javascript Google Chrome SVG数据URI

javascript google-chrome dom svg

Javascript Google Chrome SVG数据URI,javascript,google-chrome,dom,svg,Javascript,Google Chrome,Dom,Svg,我对Google Chrome上的以下代码有一个问题（它在Firefox中工作）测试负载jsp var=“”； var encodedString=btoa（svg）； var svgdataencoded='数据：image/svg+xml；base64，“+编码字符串； $（'#alphasvg'）.attr（'data'，svgdataencoded）； var a=document.getElementById（“alphasvg”）； a、 addEventListener（“加载

我对Google Chrome上的以下代码有一个问题（它在Firefox中工作）


测试负载jsp
var=“”；
var encodedString=btoa（svg）；
var svgdataencoded='数据：image/svg+xml；base64，“+编码字符串；
$（'#alphasvg'）.attr（'data'，svgdataencoded）；
var a=document.getElementById（“alphasvg”）；
a、 addEventListener（“加载”，函数（）{
var svg=a.contentDocument.getElementById（“svgid”）；
log（svg）；
}，假）；

GoogleChrome输出以下错误

未捕获的安全性错误：无法读取“contentDocument”属性来自“HTMLObjectElement”：阻止具有原点的帧 “”访问原点为“null”的帧。这个请求访问的帧具有“http”协议，该帧为被访问的有一个“数据”协议。协议必须匹配

您有解决此错误的方法吗

谢谢

在加载SVG之前，您已经拥有了它，因此如果您想更改它，那么您可以始终更改原始数据并将其作为数据属性重新加载。我想是这样，或者编写一个Chrome补丁并提交它。这是一个调试Chrome错误消息的示例代码。SVG在我的生产代码中异步加载。无论如何，Chrome抱怨http:和data:之间的协议：

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Test load jsp</title>
    </head>
    <body>        
        <object id="alphasvg"></object>    
    </body>
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script>
        var svg = "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='svgid'><circle cx='40' cy='40' r='24' style='stroke:#006600; fill:#00cc00'/></svg>";
        var encodedString = btoa(svg);
        var svgdataencoded = 'data:image/svg+xml;base64,' + encodedString;
        $('#alphasvg').attr('data', svgdataencoded);

        var a = document.getElementById("alphasvg");        
        a.addEventListener("load", function() {
            var svg = a.contentDocument.getElementById("svgid");
            console.log(svg);
        }, false);

    </script>
</html>