Ładowanie i wyświetlanie svg

Jak załadować plik .svg na stronę fabricjs.html?Ładowanie i wyświetlanie svg

Moja tkanina fiddle próbuje załadować plik http .svg, ale ja oczywiście wypróbowałem wersje lokalne. Użyłem plików .svg wygenerowanych z programu Adobe Illustrator i samego materiału.

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

Źródło

2013-03-08 dsdsdsdsd

Oto jak załadować SVG z .svg zewnętrznego

Oto kodu (upewnij się, że odwołują się do własnych 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>

Źródło

2013-03-10 02:24:30 markE

__new fabric.Group (grupa) __ wydaje się być tym, czego mi brakowało ... dzięki – dsdsdsdsd

Ładowanie i wyświetlanie svg

Odpowiedz

Powiązane problemy