javascript - Fabricjs:从本地文件夹加载 svg

标签 javascript svg fabricjs

我需要从本地文件夹加载1.svg。在以下代码中,当我将 fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg" 替换为 fabric.loadSVGFromURL("1.svg") 时>,图像不再显示在 Canvas 中。我做错了什么?正确的代码是什么?

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border: 1px solid red; }
</style>
<script>
    $(function(){
        var canvas = new fabric.Canvas('canvas');
        var group = [];
        fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg",function(objects,options) {
            var loadedObjects = new fabric.Group(group);
            loadedObjects.set({
                left: 100,
                top: 100,
                width:175,
                height:175
            });
            canvas.add(loadedObjects);
            canvas.renderAll();
        },function(item, object) {
                object.set('id',item.getAttribute('id'));
                group.push(object);
        });
    }); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width="900" height="900"></canvas> 
</body>
</html>

最佳答案

Chrome 的安全模型不允许这样做。您可以使用命令行选项 --allow-file-access-from-files 运行来覆盖它。

关于javascript - Fabricjs:从本地文件夹加载 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31042241/

相关文章:

javascript - 鼠标悬停图片有效但对齐?

javascript - 使用 jquery 仅更改图像源中的目录

javascript - Node 看不到模块

javascript - 如何与 jQuery 建立长期连接以进行推送通知?

javascript - Raphael JS - 创建自定义进度条

html - 如何在 SVG 标签上循环 CSS 动画

javascript - d3 创建对象而不附加

javascript - JSON 到达对象的列表元素

JavaScript 和 Fabric js : how to call object outside its function in this case?

canvas - 一旦 Canvas 有背景图像, canvas.toDataURL ('png' ) 就会停止工作