Javascript Fabricjs:从本地文件夹加载svg
我需要从本地文件夹加载Javascript Fabricjs:从本地文件夹加载svg,javascript,svg,fabricjs,Javascript,Svg,Fabricjs,我需要从本地文件夹加载1.svg。在下面的代码中,当我替换fabric.loadSVGFromURL(“http://fabricjs.com/assets/1.svg“使用fabric.loadSVGFromURL(“1.svg”),图像不再显示在画布中。我做错了什么?正确的代码是什么?” <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" h
1.svg
。在下面的代码中,当我替换fabric.loadSVGFromURL(“http://fabricjs.com/assets/1.svg“
使用fabric.loadSVGFromURL(“1.svg”
),图像不再显示在画布中。我做错了什么?正确的代码是什么?”
<!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>
正文{背景色:象牙;}
画布{边框:1px纯红;}
$(函数(){
var canvas=newfabric.canvas('canvas');
var组=[];
fabric.loadSVGFromURL(“http://fabricjs.com/assets/1.svg,函数(对象、选项){
var loadedObjects=新结构组(组);
loadedObjects.set({
左:100,,
前100名,
宽度:175,
身高:175
});
canvas.add(加载对象);
canvas.renderAll();
},功能(项目,对象){
object.set('id',item.getAttribute('id');
推(物)组;
});
});//end$(函数(){});
Chrome的安全模型不允许这样做。您可以使用命令行选项运行--允许从文件访问文件以覆盖此选项。此文件是否托管在服务器上?如果不是,一旦您将html文件托管在服务器上,它将显示svg图像。svg文件需要位于放置htm的网站下的同一文件夹中l文件