Fabric JS：SVG无法从URL导入

Question

I am working with fabric js , & i am getting problem in importing SVG from url on local system

fabric.loadSVGFromURL('svg/1.svg', function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
  canvas.add(obj).renderAll();
});

& try also

var site_url =  'svg/1.svg';
fabric.loadSVGFromURL(site_url, function(objects) { 
          var group = new fabric.PathGroup(objects, { 
          left: 165, 
          top: 100, 
          width: 295, 
          height: 211 
        }); 
        canvas.add(group); 
        canvas.renderAll(); 
          });

& getting error in console for both codes

can anyone help to resolve this how to import svg from local system
Thanks in advane

Answer 1

 Takes url corresponding to an SVG document, and parses it into a set of fabric objects. Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)



loadSVGFromURL: function(url, callback, reviver) {

    //put your  code here 

      url = url.replace(/^\n\s*/, '').trim();
      svgCache.has(url, function (hasUrl) {
        if (hasUrl) {
          svgCache.get(url, function (value) {
            var enlivedRecord = _enlivenCachedObject(value);
            callback(enlivedRecord.objects, enlivedRecord.options);
          });
        }
        else {
          new fabric.util.request(url, {
            method: 'get',
            onComplete: onComplete
          });
        }
      });

Answer 2

The problem is not with your code. I guess your opening the html file directly in your browser. This uses the file// protocol and doesn't support ajax requests. You should use a http server for your local system, and load your html through the http protocol.