SVG group does not work 'clipPath = null'

by SooChangLee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id="canvas" width="600" height="600"></canvas>

<button id="btn_clip_on" type="button">Clip ON</button>
<button id="btn_clip_off" type="button">Clip OFF</button>

CSS

canvas {
    border: 1px solid #ccc;
}

JavaScript

var canvas;
var slot1, slot2;

var img01URL = 'http://fabricjs.com/assets/pug_small.jpg';
var img02URL = 'https://mac.soochang.pe.kr:4443/icon.svg';

$(document).ready(function(){
	make_layout();
  insert_image();
  
  $("#btn_clip_on").on("click", function(){
    canvas.forEachObject(function(obj) {
        if (obj.id && obj.id === 'img1') {
					obj.clipPath = slot1;
        }
        if (obj.id && obj.id === 'img2') {
					obj.clipPath = slot2;
        }
    });
    canvas.renderAll();
  });  
  $("#btn_clip_off").on("click", function(){
    canvas.forEachObject(function(obj) {
        if (obj.id && obj.id === 'img1') {
					obj.clipPath = null;
        }
        if (obj.id && obj.id === 'img2') {
					obj.clipPath = null;
        }
    });    
    canvas.renderAll();
  });  
});

function make_layout(){
  canvas = new fabric.Canvas('canvas', {
    width: 500,
    height: 500,

   
  });

  slot1 = new fabric.Rect({
    left: 100,
    top: 25,
    width: 150,
    height: 150,
    fill: 'transparent',
    stroke: 'gray',
    strokeWidth: 1,
    selectable: false,
    evented: false,
    objectCaching: false,
    absolutePositioned: true,
    /* perPixelTargetFind:   true */
  });
  slot2 = new fabric.Rect({
    left: 250,
    top: 25,
    width: 150,
    height: 150,
     fill: 'transparent',
    stroke: 'gray',
    strokeWidth: 1,
    selectable: false,
    evented: false,
    objectCaching: false,
    absolutePositioned: true,
    /* perPixelTargetFind:   true */
  });
  
  canvas.add(slot1);
  canvas.add(slot2); 
}

function insert_image(){
  fabric.Image.fromURL(img01URL, function(img) {
    img.set({
    	id: "img1",
      left: 100,
      top: 25,
      originX: 'left',
      originY: 'top',
      scaleX: 0.5,
      scaleY: 0.5,
      selectable: true,
      /* objectCaching: false, */
       perPixelTargetFind:   true
    });

    canvas.add(img);

    img.clipPath = slot1;   
  }, { crossOrigin: 'Anonymous' });
  
   $.ajax({
     type: "GET",
     url:...