fabricjs - extend toSVG to export custom properties - fabricjs

Question

According to this part of the doc, it is possible to extend the toSVG() method to export custom properties. Unfortunately, it is unclear as if we should override toSVG() itself, or rather the toObject() method.
My problem is, I've used this bit of code
fabric.SHARED_ATTRIBUTES.push('class')
fabric.Path.ATTRIBUTE_NAMES.push('class')
fabric.Image.ATTRIBUTE_NAMES.push('class')
So that my imported SVGs objects would have CSS classes. Unfortunately, when using toSVG(), these classes are nowhere to be found in the generated SVG, therefore resulting in this kind of non-blended SVGs (if you set the CSS mix-blend-mode property to 'multiply' for the paths, you'll see the correct image.
How can I tweak toSVG() so that the class property gets exported in my SVG ? DO I have to modify the toSVG() method for every object in the imported SVG ?

Answer 1

You need to extend _toSVG method from each class where you want to add this extra info.
Here is an example for fabric.Path
var site_url = 'http://s3.eu-central-1.amazonaws.com/balibart-s3/SVGMockups2/59f32980b5d8493ef7f29904/front/Layer.svg';
fabric.SHARED_ATTRIBUTES.push('class')
fabric.Path.ATTRIBUTE_NAMES.push('class')
fabric.Image.ATTRIBUTE_NAMES.push('class')
fabric.Path.prototype._toSVG = (function(_toSVG){
return function(){
var svg = _toSVG.call(this);
if(this.class){
svg.splice(1,0,this.class+'" ');
svg.splice(1,0,'class="');
}
return svg;
}
})(fabric.Path.prototype._toSVG)
canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var group = new fabric.Group(objects, {
left: 165,
top: 100,
});
canvas.add(group);
canvas.renderAll();
console.log(canvas.toSVG());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<canvas id='canvas' width="900" height="300"></canvas>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<g xmlns="http://www.w3.org/2000/svg" transform="matrix(1 0 0 1 0.006507237105 4.339693398719)" id="Path-2 back">
<path class="st1" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,130,165); fill-rule: nonzero; opacity: 1;" transform=" translate(-499.991507237105, -504.294693398719)" d="M 132 374.47 c 2.83 -8.49 8.24 -16.11 12.09 -24 c 3.94 -8.12 8.42 -16 12.26 -24.14 c 5.49 -11.66 11.3 -23.16 17.19 -34.61 c 5.11 -9.92 9.87 -20 15.12 -29.87 c 4.32 -8.12 8.23 -16.44 12.49 -24.58 c 6.05 -11.54 12.13 -23.07 18.37 -34.51 c 3.44 -6.31 7.58 -12.22 11.26 -18.39 a 78.8 78.8 0 0 1 10 -13.64 a 55.62 55.62 0 0 1 9.49 -7.8 c 15.37 -10.42 31.13 -20.23 47.07 -29.73 a 394.42 394.42 0 0 1 40.24 -20.5 c 10.29 -4.63 20.46 -9.53 31 -13.66 c 0.23 -0.09 0.43 -0.24 0.66 -0.34 c 6.08 -2.74 4.37 -1.12 4.37 2.9 a 118.46 118.46 0 0 0 5 34.94 a 136.89 136.89 0 0 0 11.55 25.35 a 170.25 170.25 0 0 0 16.8 23.3 c 6.22 7.37 12.5 14.67 19.12 21.66 a 103.62 103.62 0 0 0 22.2 17.86 a 129.32 129.32 0 0 0 19.48 9.63 a 71.31 71.31 0 0 0 17.55 4.25 q 5.64 0.67 11.29 1.26 c 14.09 1.45 27.93 0.48 41.46 -3.84 A 101.4 101.4 0 0 0 572 217.18 a 143 143 0 0 0 33.54 -39.24 a 151.79 151.79 0 0 0 11.78 -24.22 c 2.53 -7 3.56 -14.39 4.25 -21.86 c 0.64 -6.91 0.8 -13.8 1 -20.72 c 0 -2.13 0.57 -4.25 0.45 -6.41 s 1.59 -1.84 2.47 -1.42 c 7.84 3.75 16.08 6.4 24.26 9.24 s 16.27 5.85 24.18 9.36 c 7.05 3.13 13.89 6.67 20.62 10.42 c 7.29 4.06 14.4 8.43 21.67 12.52 c 9.29 5.22 18.4 10.65 26.57 17.59 a 222.23 222.23 0 0 0 20 15.12 c 1.92 1.29 2.5 3.46 3.62 5.23 c 4.74 7.54 9.65 15 14 22.78 c 7.24 13 14 26.32 20.4 39.78 c 4.26 8.94 9.11 17.59 13.66 26.4 c 3.88 7.51 7.66 15.07 11.57 22.56 c 6.79 13 13.5 26.06 20.52 38.94 c 6.33 11.62 13 23 19.54 34.57 c 0.8 1.42 3.91 3.45 -0.19 3.73 c -7.89 3.14 -16.31 6.69 -24 10.35 c -7.5 3.59 -14.88 7.56 -22.17 11.58 c -9.14 5 -18.3 10.16 -27.47 15.16 c -9.7 5.29 -19.38 10.61 -29 16.07 c -14.42 8.19 -28.3 17 -42.27 26 c -0.35 0.22 -2.59 2.12 -2.92 2.38 c -3.43 2.72 -2.21 1.1 -5.85 -1.22 a 8.71 8.71 0 0 0 -3.28 -1.6 c 0.48 4.22 -0.28 8.29 -0.48 12.4 c -0.43 8.72 -0.11 17.45 -0.53 26.15 c -0.6 12.44 -0.6 24.88 -1 37.31 c -0.44 13.1 -0.71 26.21 -1 39.31 c -0.12 4.88 0.1 9.8 -0.43 14.65 c -0.78 7.22 0 14.46 -0.48 21.66 c -0.79 12.51 -0.75 25 -1.09 37.56 c -0.14 5.22 0.11 10.47 -0.44 15.65 c -0.79 7.56 0 15.13 -0.5 22.66 c -0.43 6 0 12 -0.52 17.9 c -0.61 7.1 -0.14 14.18 -0.43 21.25 c -0.53 12.6 -0.86 25.2 -1.13 37.81 c -0.11 5.38 0.07 10.79 -0.39 16.15 c -1 11.13 -0.13 22.28 -0.48 33.41 a 43.23 43.23 0 0 0 1.08 11.29 c 0.91 3.89 0.38 7.69 -0.27 11.51 a 12.52 12.52 0 0 0 -0.27 1.45 c -0.83 16.71 -0.62 33.44 -0.39 50.15 a 109.17 109.17 0 0 0 1.74 15 a 43 43 0 0 1 -0.47 12.82 c -0.16 1.05 -1.4 1.55 -2.65 1.75 a 34.36 34.36 0 0 1 -12.06 0 a 9.25 9.25 0 0 0 -2 0 c -11.79 0.29 -23.52 -1.14 -35.31 -1.18 c -5.36 0 -10.79 0.09 -16.15 -0.37 c -9.22 -0.79 -18.46 0.07 -27.65 -0.57 c -7.07 -0.49 -14.12 0 -21.16 -0.4 c -20.46 -1.08 -40.94 0 -61.4 -0.6 c -5.89 -0.17 -11.81 0.12 -17.65 -0.48 a 105.12 105.12 0 0 0 -15.66 -0.33 c -16 0.74 -32 -0.11 -47.9 0.55 c -11.56 0.48 -23.11 0.12 -34.66 0.37 c -11.07 0.23 -22.1 1 -33.12 2 c -3.46 0.29 -6.94 0.19 -10.41 0.4 c -5.53 0.34 -11.11 0.43 -16.64 0.76 c -7.88 0.48 -15.77 1 -23.64 1.67 c -5.9 0.53 -11.81 1.74 -17.79 1.17 a 42.11 42.11 0 0 1 -6 -1 a 2.54 2.54 0 0 1 -2 -2 c -0.42 -4.59 -1 -9.17 -0.16 -13.81 c 0.49 -2.58 0.25 -5.26 0.5 -7.9 c 0.37 -3.93 1.44 -7.8 1.17 -11.79 c -0.37 -5.66 0.5 -11.36 -0.52 -17 a 11.29 11.29 0 0 1 0 -2 c 0 -23.92 -0.38 -47.84 0.14 -71.74 c 0.31 -14.22 -0.22 -28.45 0.47 -42.65 c 0.4 -8.23 -0.11 -16.46 0.44 -24.66 c 0.9 -13.22 -0.16 -26.46 0.53 -39.65 c 0.67 -12.64 0.29 -25.27 0.38 -37.91 c 0.13 -18.85 0.4 -37.71 -0.11 -56.55 c -0.3 -10.92 0.07 -21.84 -0.4 -32.75 c -0.41 -9.55 -0.06 -19.12 -0.56 -28.65 c -0.72 -13.73 -0.11 -27.44 -0.4 -41.16 c -0.21 -10 -0.47 -20 -1.29 -30.35 c -0.91 1.32 -0.77 2 -1.84 1.38 c -6.73 -3.84 -14.48 -8.45 -21.29 -12.13 c -5 -2.71 -10 -5.37 -15.27 -7.7 c -4.62 -2.06 -9.07 -4.52 -13.71 -6.56 c -9.35 -4.1 -18.75 -8.1 -27.93 -12.54 q -8.46 -4.09 -16.79 -8.48 c -7.35 -3.87 -14.92 -7.33 -22.5 -10.72 c -5.21 -2.33 -10.6 -4.28 -15.93 -6.34 c -7 -2.69 -14 -5.28 -21 -8 C 138.52 377.06 134.83 375.72 132 374.47 Z" stroke-linecap="round"/>
</g>
</svg>
</textarea>

Answer 2

You can override the existing toSVG function like this.
var circle = new fabric.Circle ({
radius: 40,
left: 50,
top: 50,
fill: 'rgb(0,255,0)',
opacity: 0.5,
id: 'hello'
});
circle.toSVG = (function(toSVG) {
return function(){
var svgString = toSVG.call(this);
var domParser = new DOMParser();
var doc = domParser.parseFromString(svgString, 'image/svg+xml');
var parentG = doc.querySelector('circle')
parentG.setAttribute('id', this.id);
return doc.documentElement.outerHTML;
}
})(circle.toSVG)