Millerish
@Millerish

Как получить площадь элементов svg?

Доброе время суток!

Мне нужно получить площадь фигур исключая двойное наложение. Фигуры могут быть трех типов (но при этом могут быть сжаты или вытянуты или повернуты):

0e81adeb79704616986beaaea2ee4195.PNG

Например, соединенная фигура может быть такой:

579c1f2e02ed4aa7a7bb1d140688a414.PNG

У меня есть возможность получить 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":""}


Или SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1600" height="400" viewBox="0 0 1600 400" xml:space="preserve">
<desc>Created with Fabric.js 1.6.1</desc>
<defs></defs>
<g transform="translate(637.5 191.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(-30 7)"/>
	<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,0 -52,56 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>


Как мне проще всего получить плошать без двойного наложения?
  • Вопрос задан
  • 530 просмотров
Решения вопроса 1
longclaps
@longclaps
Проще всего получить площадь, отрендерив svg png и посчитав пикселы нужного цвета.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы