加载和显示SVG

Question

加载和显示SVG

10

如何将.svg文件加载到fabricjs的html页面中？

我的fabric 示例尝试加载http的.svg文件，但我当然也尝试过本地版本。我已经使用了从Adobe Illustrator和Fabric本身生成的.svg文件。

fabric.loadSVGFromURL( gvs_svgSrc, 
                       function ( argo ) 
                         { //alert( "load handler : " + argo ) ; 
                           // ... returns: #<fabric.Rect>
                           lvo_SVG = argo.set({ left: 250, top: 200, angle: 0 });
                           lvo_SVG = argo.scale(0.25);
                           gvo_canvas.add( lvo_SVG );
                           gvo_canvas.renderAll();
                         });

- dsdsdsdsd

2个回答

5

fabric.loadSVGFromURL('http://example.com/_bg.svg',function(objects, options){
  var svgData = fabric.util.groupSVGElements(objects, options);
  svgData.top = 30;
  svgData.left = 50;
  canvas.add(svgData);
});

使用fabric从有效的.svg URL加载.svg文件到画布中
通过fabric在画布中加载svg文件

- Milan Krushna

值得注意的是，这两种方法/答案之间的区别在于第一种方法从SVG中提取元素，即修剪周围的空白。而这种方法不修剪任何空格，这在我的情况下很有帮助。谢谢。 - Sebastian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

这里是如何从外部.svg文件中加载SVG的方法

以下是代码（请确保链接到您自己的fabricJS .js文件）：

<!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 type="text/javascript" src="fabric.min.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="300" height="300"></canvas> 
</body>
</html>