尝试访问对象中的 svg 时 chrome 出错
Error on chrome when trying to access svg in object
我没有太多编码经验,我正在尝试让用户对元素中嵌入的 SVG 有一定的控制权。我找到了 ariutta svgpanzoom.js 库,但是当我尝试用它做一个小测试时,我在 chrome 中遇到安全错误(Firefox 和 Safari 一切正常)
这是我的基本代码
<!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>
有谁知道我做错了什么吗?
提前致谢...
Bumbu 是对的:Chrome 阻止从远程脚本 (svg-pan-zoom) 访问本地文档(在本例中为对象)。
当 运行 来自本地服务器时,代码运行良好。
我没有太多编码经验,我正在尝试让用户对元素中嵌入的 SVG 有一定的控制权。我找到了 ariutta svgpanzoom.js 库,但是当我尝试用它做一个小测试时,我在 chrome 中遇到安全错误(Firefox 和 Safari 一切正常)
这是我的基本代码
<!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>
有谁知道我做错了什么吗?
提前致谢...
Bumbu 是对的:Chrome 阻止从远程脚本 (svg-pan-zoom) 访问本地文档(在本例中为对象)。
当 运行 来自本地服务器时,代码运行良好。