Chargement et affichage svg

comment faites-vous pour charger un .svg dans un fabricjs.html la page?

mon tissu violon tente de charger un http .fichier svg, mais j'ai, bien sûr, essayé des versions locales. J'ai utilisé .les fichiers svg généré à partir d'adobe illustrator et le tissu lui-même.

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();
                         });
InformationsquelleAutor dsdsdsdsd | 2013-03-08
  1. 11

    Voici comment vous chargez SVG à partir d'un externe .svg

    Voici le code (assurez-vous d'accéder à votre propre 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>
    • nouveau tissu.Groupe(group) semble être ce que j'étais en manque ... merci
    InformationsquelleAutor markE
  2. 1
    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);
});
    1. Charge .fichier svg en toile à partir d'un valide .svg URL à l'aide de tissu
    2. Chargement de fichier svg en toile creux tissu
    InformationsquelleAutor Milan Krushna