问题描述
我没有太多的编码经验，我试图让用户能够控制嵌入元素的SVG。我找到了ariutta svgpanzoom.js库，但是当我尝试使用它进行一个小测试时，我在chrome中出现安全错误（一切与Firefox和Safari一起运行良好）
这是我的基本代码
p>我在Chrome上遇到的错误是：
有没有人知道我做错了什么？
在此先感谢.. 。bumbu是正确的：Chrome阻止从远程脚本访问本地文档（在这种情况下为对象）（svg-pan）。 -zoom）。
从本地服务器运行时，代码运行良好。
I don't have much experience with coding and I'm trying to give a user some control over an SVG embedded in an element. I found the ariutta svgpanzoom.js library, but when I try to make a small test with it, I have a security error in chrome (everything works well with Firefox and Safari)
Here's my basic code
<!DOCTYPE html>
<html>
<head>
<title>SVG test</title>
<meta charset="utf-8">
<script src="http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
</head>
<body>
<p><h1>Test SVG in object tag</h1></p>
<br>
<object id="mySVG" type="image/svg+xml" data="../Tests/simpleSVG.svg" width="400" height="400" style="border: 1px solid red;"></object>
<script>
window.onload = function() {
svgPanZoom("#mySVG", {
zoomEnabled: true,
controlIconsEnabled: true
});
};
</script>
</body>
</html>The error I get on Chrome is:Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
Does anyone have an idea of what I did wrong ?
Thanks in advance...
Bumbu is right : Chrome blocks the access to local documents (Object in this case) from remote scripts (svg-pan-zoom).
The code works well when run from a local server.
这篇关于尝试访问对象中的svg时出现铬错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！