How to get the area of the svg elements?

Good time of day!

I need to get the area of the figure eliminating double imposition. Shapes can be of three types (but can be compressed or stretched or rotated):

0e81adeb79704616986beaaea2ee4195.PNG

For example, the linked figure could be:

579c1f2e02ed4aa7a7bb1d140688a414.PNG

I have the opportunity to JSON:

{"objects":[{"type":"group","originX":"left","originY":"top","left":481,"top":91,"width":313,"height":201,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[{"type":"rect","originX":"left","originY":"top","left":-103.5,"top":-43.5,"width":146,"height":100,"fill":"#eccdae","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"circle","originX":"left","originY":"top","left":-44.5,"top":-100.5,"width":200,"height":200,"fill":"#eccdae","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":100,"startAngle":0,"endAngle":6.283185307179586},{"type":"triangle","originX":"left","originY":"top","left":-156.5,"top":-63.5,"width":112,"height":104,"fill":"#eccdae","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0}]}],"background":""}


Or SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" width="1600" height="400" viewBox="0 0 1600 400" space="preserve">
<desc>Created with Fabric.js 1.6.1</desc>
<defs/>
<g transform="translate(191.5 637.5)" style="">
 <rect x="-73" y="-50" rx="0" ry="0" width="146" height="100" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #eccdae; fill-rule: nonzero; opacity: 1;" transform="translate(7 -30)"/>
 <circle cx="0" cy="0" r="100" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #eccdae; fill-rule: nonzero; opacity: 1;" transform="translate(56 0) "/>
 <polygon points="-56 -52,56 52,0 52" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #eccdae; fill-rule: nonzero; opacity: 1;" transform="translate(-100 -11)"/></g>
</svg>


As I find it easier to make a mistake without double overlay?
August 19th 19 at 22:53
2 answers
August 19th 19 at 22:57
Solution
render group on the canvas and podschitany opaque pixels
it can be an example or a link to an example? - marcelina.Bruen commented on August 19th 19 at 23:00
: to do this you need to be a programmer - kadi commented on August 19th 19 at 23:03
August 19th 19 at 22:55
Solution
The easiest way to area etrangeres svg and png considering the pixels of the desired color.
how to do it? - marcelina.Bruen commented on August 19th 19 at 22:58
:
to render this: stackoverflow.com/questions/9853325/how-to-convert...
to read the pixels from any language + libraries, for example python + pillow - kadi commented on August 19th 19 at 23:01

Find more questions by tags GeometryHTMLJavaScriptJSONSVG