toSVG: nested clip path support

[ShaMan123]

Version

latest than latest

Test Case

http://jsfiddle.net/yzvd69er/14/
https://codesandbox.io/s/jbvsc

Information about environment

Chrome

Steps to reproduce

    canvas.add(
      new fabric.Circle({
        top: 100, left: 100, radius: 75, fill: "red",
        clipPath: new fabric.Rect({
          //  top: 50,
          //   left: 150,
          originX: 'center', originY: 'center',
          width: 50,
          height: 50,
          clipPath: new fabric.Circle({ top: 0, left: 0, radius: 10, originX: 'center', originY: 'center', }),
        }),
      }),
      new fabric.Group([
        new fabric.Circle({
          top: 0, left: 0, radius: 75, fill: "red",
          clipPath: new fabric.Group([
            new fabric.Circle({
              top: 0, left: 0, radius: 100, fill: "red"
            })
          ], {
            clipPath: new fabric.Circle({
              top: -50, left: -50, radius: 25, fill: "red",
              originX: 'center',
              originY: 'center',
            })
          })
        })
      ])
    );

Expected Behavior

nested clip path should clip it's object (the top clip path) so that the object is clipped by the overlapping content of the clip paths.

Actual Behavior

#7585 fixed most of the problem (toClipPathSVG didn't support clip path). However, group poses a problem (as usual).
It seems svg doesn't support <g> inside <clipPath> so the case of a group that has a clip path and is itself a clip path is not supported. I am struggling to find a way to clip an object with multiple nested clip paths.
I think of 2 options:

1. wrapping object with <g> with a clip path. (annoying because it will need to reverse nesting)
2. mask

image output - correct

svgoutput - incorrect

[ShaMan123]

#7616