2013-03-08 1 views
6

Wie laden Sie eine .svg in eine fabricjs.html-Seite?Laden und Anzeigen von Svg

mein Stoff fiddle versucht, eine http. Svg-Datei zu laden, aber ich habe natürlich versucht, lokale Versionen. Ich habe .svg-Dateien verwendet, die von Adobe Illustrator und Fabric selbst generiert wurden.

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(); 
         }); 

Antwort

11

Hier ist, wie Sie SVG von einem externen .svg

Hier Code (sicherzustellen, dass Sie Ihren eigenen fabricJS Js Link) laden:

<!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> 
+0

__new fabric.Group (Gruppe) __ scheint zu sein, was mir gefehlt hat ... danke – dsdsdsdsd