0

Генерируется SVG файл, в котором есть rect, внутри которого много разных path фигур. Мне необходимо определить границу, в который вписываются данные фигуры (выделена красным) введите сюда описание изображения

не знаю с какой стороны подойти. path объекты объеденины в группы, у которых есть свои свойства. Пример svg выкладываю ниже:

<svg>
<rect width="2486" height="1236" fill="none" stroke="#010101" class="bin" transform="translate(0 0)">
</rect>
<g transform="translate(3.0000000000010103 5679.7663694) rotate(270)">
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5624.346889069733 173.3831847043796A 124.0000000000001 124.0000000000001 0 0 0 5503.38318470422 52.41948033886686L 5503.3831847043 61.38318470429999L 5500.3831847043 61.38318470429999L 5500.3831847043 0L 5080.3831847043 2.2737367544323206e-13L 5080.3831847043 61.38318470430022L 5077.3831847043 61.38318470430022L 5077.3831847043 52.41948033890026A 124.0000000000001 124.0000000000001 0 0 0 4956.419480338867 173.38318470437997L 4965.3831847043 173.38318470430022L 4965.3831847043 176.38318470430022L 4904 176.38318470430022L 4904 1546.3831847043002L 4965.3831847043 1546.3831847043002L 4965.3831847043 1549.3831847043002L 4956.4194803389 1549.3831847043002A 124.0000000000004 124.0000000000004 0 0 0 5077.383184704379 1670.3468890697336L 5077.3831847043 1661.3831847043002L 5080.3831847043 1661.3831847043002L 5080.3831847043 1722.7663694086002L 5500.3831847043 1722.7663694086002L 5500.3831847043 1661.3831847043L 5503.3831847043 1661.3831847043L 5503.3831847043 1670.3468890697A 123.9999999999998 123.9999999999998 0 0 0 5624.346889069733 1549.3831847042204L 5615.3831847043 1549.3831847043L 5615.3831847043 1546.3831847043L 5676.7663694086 1546.3831847043L 5676.7663694086 176.3831847043L 5615.3831847043 176.3831847043L 5615.3831847043 173.3831847043L 5624.3468890697 173.3831847043z"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5391.1831847043 811.3831847043002A 21.19999999999991 21.19999999999991 0 0 1 5433.5831847043 811.3831847043002A 21.19999999999991 21.19999999999991 0 0 1 5391.1831847043 811.3831847043002z" class="null hole"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5460.2831847043 646.3831847043002A 20.1 20.1 0 0 1 5500.483184704301 646.3831847043002A 20.1 20.1 0 0 1 5460.2831847043 646.3831847043002z" class="null hole"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5323.7831847043 996.3831847043002A 20.1 20.1 0 0 1 5363.983184704301 996.3831847043002A 20.1 20.1 0 0 1 5323.7831847043 996.3831847043002z" class="null hole"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5429.8831847043 970.3831847043002L 5429.8831847043 964.3831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5430.3831847043 963.8831847043002L 5436.3831847043 963.8831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5436.8831847043 964.3831847043002L 5436.8831847043 970.3831847043002A 0.5000000000000567 0.5000000000000567 0 0 1 5436.3831847043 970.8831847043002L 5430.3831847043 970.8831847043002A 0.4999999999999433 0.4999999999999433 0 0 1 5429.8831847043 970.3831847043002z" class="null hole"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5436.3831847043 1064.8831847043002L 5430.3831847043 1064.8831847043002A 0.5 0.5 0 0 1 5429.8831847043 1064.3831847043002L 5429.8831847043 1058.3831847043002A 0.5000000000000567 0.5000000000000567 0 0 1 5430.3831847043 1057.8831847043002L 5436.3831847043 1057.8831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5436.8831847043 1058.3831847043002L 5436.8831847043 1064.3831847043002A 0.4999999999999717 0.4999999999999717 0 0 1 5436.3831847043 1064.8831847043002z" class="null hole"></path>
</g>
<g transform="translate(-2663 781.7663693999999) rotate(0)">
    <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2666 0L 2815 0A 1 1 0 0 0 2817 0L 2896.9999999999927 0A 1 1 0 0 0 2898.9999999999927 0L 2979 0A 1 1 0 0 0 2981 0L 4349 0A 1 1 0 0 0 4351 0L 4430.999999999993 0A 1 1 0 0 0 4432.999999999993 0L 4513 0A 1 1 0 0 0 4515 0L 4784 0L 4784 140L 2666 140L 2666 0z"></path>
    <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4110.9707541064 96.9622484514L 4021.2425652562 103.95167801780002A 16 16 0 1 1 4020 72L 4110 72A 12.5 12.5 0 0 1 4110.970754106438 96.96224845141653z" class="null hole"></path>
    <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 3240.9707541064 96.9622484514L 3151.2425652562 103.95167801780002A 16 16 0 1 1 3150 72L 3240 72A 12.5 12.5 0 0 1 3240.970754106438 96.96224845141653z" class="null hole"></path>
    <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4734.9707541064 96.9622484514L 4645.2425652562 103.95167801780008A 16 16 0 1 1 4644 72L 4734 72A 12.5 12.5 0 0 1 4734.970754106438 96.96224845141653z" class="null hole"></path>
</g>
<g transform="translate(-912 927.7663694) rotate(0)">
    <path id="svg-11" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2265 0L 915 0L 915 76.99999999999966L 2265 77L 2265 0z"></path>
</g>
<g transform="translate(1358.9963864000001 1227.7663694) rotate(270)">
    <path id="svg-10" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 300 2.8421709430404007e-13L 300 76.99999999999989A 108.0000000000001 108.0000000000001 0 0 0 191.9999999999999 185L 192 605A 108.0000000000001 108.0000000000001 0 0 0 300 713.0000000000001L 300 789.9999999999998A 184.9999999999997 184.9999999999997 0 0 1 115.00000000000034 605L 115 185A 184.9999999999997 184.9999999999997 0 0 1 300 3.410605131648481e-13z"></path>
</g>
<g transform="translate(-4610.0072272 394.6805645) rotate(0)">
    <path id="svg-8" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 6637 713L 6637 789.9999999999999A 184.9999999999999 184.9999999999999 0 0 0 6822 605L 6822 185A 184.9999999999998 184.9999999999998 0 0 0 6637 1.9895196601282805e-13L 6637 77L 6657 77A 108 108 0 0 1 6765 185L 6765 605A 108.0000000000003 108.0000000000003 0 0 1 6657 713.0000000000002L 6637 713z"></path>
</g>
<g transform="translate(7684.080086100001 1112.7663693999991) rotate(180)">
    <path id="svg-9" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 7438 0A 1 1 0 0 0 7437 1.0000000000000002L 7437 59.00000000000004A 1 1 0 0 0 7438 60.00000000000004L 7483.918722720954 60.00000000000004A 1.000000000000006 1.000000000000006 0 0 0 7484.861531762536 59.333333333333385A 2.000000000000002 2.000000000000002 0 1 1 7487.413816512367 61.88561808316417A 1 1 0 0 0 7486.747149845701 62.82842712474614L 7486.747149845701 101A 1 1 0 0 0 7487.747149845701 102L 7630.3329362833 102.0000000000001A 1 1 0 0 0 7631.3329362833 101L 7631.3329362833 62.82842712474614A 0.9999999999999926 0.9999999999999926 0 0 0 7630.666269616634 61.88561808316408A 2.000000000000002 2.000000000000002 0 1 1 7633.218554366465 59.333333333333364A 1 1 0 0 0 7634.161363408047 60.00000000000004L 7680.080086129001 60.00000000000004A 1 1 0 0 0 7681.080086129001 59.00000000000004L 7681.080086129001 1A 1 1 0 0 0 7680.080086129001 0L 7438 0z"></path></g><g transform="translate(2458 1158.7663693999998) rotate(180)">
    <path id="svg-13" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2276 0L 2454 0A 1 1 0 0 1 2455 1L 2455 39A 1 1 0 0 1 2454 40L 2276 40A 1 1 0 0 1 2275 39L 2275 1A 1 1 0 0 1 2276 0z"></path>
</g>
<g transform="translate(-4540.9199139 1010.7663694) rotate(0)">
    <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4794 64.99999999999999L 4804 64.99999999999999L 4804 68L 4804 79.00000000000001A 16 16 0 0 0 4820 95.00000000000001L 4868 95A 16 16 0 0 0 4884 79.00000000000001L 4884 68L 4884 64.99999999999999L 4894 64.99999999999999L 4894 0L 4888 0L 4888 5L 4869 5L 4869 44.99999999999993A 10 10 0 0 1 4859 55L 4829 55A 9.999999999999996 9.999999999999996 0 0 1 4819 45L 4819 4.999999999999986L 4800 5L 4800 0L 4794 0L 4794 64.99999999999999z"></path>
    <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4835 82A 9 9 0 0 1 4853 82A 9 9 0 0 1 4835 82z" class="null hole"></path>
    <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4810 82A 9 9 0 0 1 4828 82A 9 9 0 0 1 4810 82z" class="null hole"></path>
    <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4860 82A 9 9 0 0 1 4878 82A 9 9 0 0 1 4860 82z" class="null hole"></path>
</g>
<g transform="translate(102.94235579999985 -1757.2336306000002) rotate(90)">
    <path id="svg-2" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2465 85L 2465 20A 20.00000000000003 20.00000000000003 0 0 1 2485 -2.8421709430404014e-14L 2533 0L 2533 30L 2505 30A 10 10 0 0 0 2495 40L 2495 85A 15 15 0 0 1 2465 85z"></path>
    <path id="svg-2" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2472 85L 2472 70A 7.999999999999994 7.999999999999994 0 0 1 2488 70L 2488 85A 8 8 0 0 1 2472 85z" class="null hole"></path>
</g>
<g transform="translate(107.99546409999999 78.2958948) rotate(180)">
    <path id="svg-1" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d=" M0,42 L0,15 A15,15 0 0,1 14.999999999999996,0 L45,0 L45,37 A10.00000000000002,10.00000000000002 0 0,0 55,47.000000000000014 L105,47 L105,52 A5.00000000000002,5.00000000000002 0 0,1 100,57.000000000000014 L15,57 A15.00000000000001,15.00000000000001 0 0,1 -1.0658141036401503e-14,42 z"></path>
    <path id="svg-1" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d=" M6.0000000000000036,15.000000000000002 A8.999999999999996,8.999999999999996 0 0,1 23.999999999999996,14.999999999999998                     A8.999999999999996,8.999999999999996 0 0,1 6.0000000000000036,14.999999999999998 z" class="null hole"></path></g><g transform="translate(374.0830121999998 -1474.658204) rotate(90)">
    <path id="svg-4" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2575.0000000000005 7.780442956573097e-13L 2593.0000000000005 7.283063041541027e-13A 63 63 0 0 0 2656.0000000000005 63.000000000000725L 2656.0000000000005 81.00000000000072A 81 81 0 0 1 2575.0000000000005 7.382259432271963e-13z"></path>
</g>
</svg>

2

2 ответа 2

1

Если я правильно понял задачу, вы хотите отрисованные фигуры отобразить на весь холст SVG.

В таком случае оберните фигуры в ещё одну группу <g>, дайте ей какой-нибудь идентификатор и через метод .getBBox() получите её позицию и размеры - это будут данные по всем фигурам сразу, внутри данной группы.
Далее вы выставляете эти значения для родительского SVG, в основном эти данные нужно передать для атрибута viewbox

const svg = document.querySelector('svg');
const rect = svg.querySelector('#rect').getBBox();

svg.setAttributeNS(null, 'viewBox', `${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
svg.setAttributeNS(null, 'width', rect.width);
<svg>
  <rect width="2486" height="1236" fill="none" stroke="#010101" class="bin" transform="translate(0 0)"></rect>
  <g id="rect">
    <g transform="translate(3.0000000000010103 5679.7663694) rotate(270)">
      <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5624.346889069733 173.3831847043796A 124.0000000000001 124.0000000000001 0 0 0 5503.38318470422 52.41948033886686L 5503.3831847043 61.38318470429999L 5500.3831847043 61.38318470429999L 5500.3831847043 0L 5080.3831847043 2.2737367544323206e-13L 5080.3831847043 61.38318470430022L 5077.3831847043 61.38318470430022L 5077.3831847043 52.41948033890026A 124.0000000000001 124.0000000000001 0 0 0 4956.419480338867 173.38318470437997L 4965.3831847043 173.38318470430022L 4965.3831847043 176.38318470430022L 4904 176.38318470430022L 4904 1546.3831847043002L 4965.3831847043 1546.3831847043002L 4965.3831847043 1549.3831847043002L 4956.4194803389 1549.3831847043002A 124.0000000000004 124.0000000000004 0 0 0 5077.383184704379 1670.3468890697336L 5077.3831847043 1661.3831847043002L 5080.3831847043 1661.3831847043002L 5080.3831847043 1722.7663694086002L 5500.3831847043 1722.7663694086002L 5500.3831847043 1661.3831847043L 5503.3831847043 1661.3831847043L 5503.3831847043 1670.3468890697A 123.9999999999998 123.9999999999998 0 0 0 5624.346889069733 1549.3831847042204L 5615.3831847043 1549.3831847043L 5615.3831847043 1546.3831847043L 5676.7663694086 1546.3831847043L 5676.7663694086 176.3831847043L 5615.3831847043 176.3831847043L 5615.3831847043 173.3831847043L 5624.3468890697 173.3831847043z"></path>
      <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5391.1831847043 811.3831847043002A 21.19999999999991 21.19999999999991 0 0 1 5433.5831847043 811.3831847043002A 21.19999999999991 21.19999999999991 0 0 1 5391.1831847043 811.3831847043002z" class="null hole"></path>
      <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5460.2831847043 646.3831847043002A 20.1 20.1 0 0 1 5500.483184704301 646.3831847043002A 20.1 20.1 0 0 1 5460.2831847043 646.3831847043002z" class="null hole"></path>
      <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5323.7831847043 996.3831847043002A 20.1 20.1 0 0 1 5363.983184704301 996.3831847043002A 20.1 20.1 0 0 1 5323.7831847043 996.3831847043002z" class="null hole"></path>
      <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5429.8831847043 970.3831847043002L 5429.8831847043 964.3831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5430.3831847043 963.8831847043002L 5436.3831847043 963.8831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5436.8831847043 964.3831847043002L 5436.8831847043 970.3831847043002A 0.5000000000000567 0.5000000000000567 0 0 1 5436.3831847043 970.8831847043002L 5430.3831847043 970.8831847043002A 0.4999999999999433 0.4999999999999433 0 0 1 5429.8831847043 970.3831847043002z" class="null hole"></path>
      <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5436.3831847043 1064.8831847043002L 5430.3831847043 1064.8831847043002A 0.5 0.5 0 0 1 5429.8831847043 1064.3831847043002L 5429.8831847043 1058.3831847043002A 0.5000000000000567 0.5000000000000567 0 0 1 5430.3831847043 1057.8831847043002L 5436.3831847043 1057.8831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5436.8831847043 1058.3831847043002L 5436.8831847043 1064.3831847043002A 0.4999999999999717 0.4999999999999717 0 0 1 5436.3831847043 1064.8831847043002z" class="null hole"></path>
    </g>
    <g transform="translate(-2663 781.7663693999999) rotate(0)">
      <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2666 0L 2815 0A 1 1 0 0 0 2817 0L 2896.9999999999927 0A 1 1 0 0 0 2898.9999999999927 0L 2979 0A 1 1 0 0 0 2981 0L 4349 0A 1 1 0 0 0 4351 0L 4430.999999999993 0A 1 1 0 0 0 4432.999999999993 0L 4513 0A 1 1 0 0 0 4515 0L 4784 0L 4784 140L 2666 140L 2666 0z"></path>
      <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4110.9707541064 96.9622484514L 4021.2425652562 103.95167801780002A 16 16 0 1 1 4020 72L 4110 72A 12.5 12.5 0 0 1 4110.970754106438 96.96224845141653z" class="null hole"></path>
      <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 3240.9707541064 96.9622484514L 3151.2425652562 103.95167801780002A 16 16 0 1 1 3150 72L 3240 72A 12.5 12.5 0 0 1 3240.970754106438 96.96224845141653z" class="null hole"></path>
      <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4734.9707541064 96.9622484514L 4645.2425652562 103.95167801780008A 16 16 0 1 1 4644 72L 4734 72A 12.5 12.5 0 0 1 4734.970754106438 96.96224845141653z" class="null hole"></path>
    </g>
    <g transform="translate(-912 927.7663694) rotate(0)">
      <path id="svg-11" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2265 0L 915 0L 915 76.99999999999966L 2265 77L 2265 0z"></path>
    </g>
    <g transform="translate(1358.9963864000001 1227.7663694) rotate(270)">
      <path id="svg-10" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 300 2.8421709430404007e-13L 300 76.99999999999989A 108.0000000000001 108.0000000000001 0 0 0 191.9999999999999 185L 192 605A 108.0000000000001 108.0000000000001 0 0 0 300 713.0000000000001L 300 789.9999999999998A 184.9999999999997 184.9999999999997 0 0 1 115.00000000000034 605L 115 185A 184.9999999999997 184.9999999999997 0 0 1 300 3.410605131648481e-13z"></path>
    </g>
    <g transform="translate(-4610.0072272 394.6805645) rotate(0)">
      <path id="svg-8" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 6637 713L 6637 789.9999999999999A 184.9999999999999 184.9999999999999 0 0 0 6822 605L 6822 185A 184.9999999999998 184.9999999999998 0 0 0 6637 1.9895196601282805e-13L 6637 77L 6657 77A 108 108 0 0 1 6765 185L 6765 605A 108.0000000000003 108.0000000000003 0 0 1 6657 713.0000000000002L 6637 713z"></path>
    </g>
    <g transform="translate(7684.080086100001 1112.7663693999991) rotate(180)">
      <path id="svg-9" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 7438 0A 1 1 0 0 0 7437 1.0000000000000002L 7437 59.00000000000004A 1 1 0 0 0 7438 60.00000000000004L 7483.918722720954 60.00000000000004A 1.000000000000006 1.000000000000006 0 0 0 7484.861531762536 59.333333333333385A 2.000000000000002 2.000000000000002 0 1 1 7487.413816512367 61.88561808316417A 1 1 0 0 0 7486.747149845701 62.82842712474614L 7486.747149845701 101A 1 1 0 0 0 7487.747149845701 102L 7630.3329362833 102.0000000000001A 1 1 0 0 0 7631.3329362833 101L 7631.3329362833 62.82842712474614A 0.9999999999999926 0.9999999999999926 0 0 0 7630.666269616634 61.88561808316408A 2.000000000000002 2.000000000000002 0 1 1 7633.218554366465 59.333333333333364A 1 1 0 0 0 7634.161363408047 60.00000000000004L 7680.080086129001 60.00000000000004A 1 1 0 0 0 7681.080086129001 59.00000000000004L 7681.080086129001 1A 1 1 0 0 0 7680.080086129001 0L 7438 0z"></path></g><g transform="translate(2458 1158.7663693999998) rotate(180)">
      <path id="svg-13" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2276 0L 2454 0A 1 1 0 0 1 2455 1L 2455 39A 1 1 0 0 1 2454 40L 2276 40A 1 1 0 0 1 2275 39L 2275 1A 1 1 0 0 1 2276 0z"></path>
    </g>
    <g transform="translate(-4540.9199139 1010.7663694) rotate(0)">
      <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4794 64.99999999999999L 4804 64.99999999999999L 4804 68L 4804 79.00000000000001A 16 16 0 0 0 4820 95.00000000000001L 4868 95A 16 16 0 0 0 4884 79.00000000000001L 4884 68L 4884 64.99999999999999L 4894 64.99999999999999L 4894 0L 4888 0L 4888 5L 4869 5L 4869 44.99999999999993A 10 10 0 0 1 4859 55L 4829 55A 9.999999999999996 9.999999999999996 0 0 1 4819 45L 4819 4.999999999999986L 4800 5L 4800 0L 4794 0L 4794 64.99999999999999z"></path>
      <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4835 82A 9 9 0 0 1 4853 82A 9 9 0 0 1 4835 82z" class="null hole"></path>
      <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4810 82A 9 9 0 0 1 4828 82A 9 9 0 0 1 4810 82z" class="null hole"></path>
      <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4860 82A 9 9 0 0 1 4878 82A 9 9 0 0 1 4860 82z" class="null hole"></path>
    </g>
      <g transform="translate(102.94235579999985 -1757.2336306000002) rotate(90)">
      <path id="svg-2" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2465 85L 2465 20A 20.00000000000003 20.00000000000003 0 0 1 2485 -2.8421709430404014e-14L 2533 0L 2533 30L 2505 30A 10 10 0 0 0 2495 40L 2495 85A 15 15 0 0 1 2465 85z"></path>
      <path id="svg-2" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2472 85L 2472 70A 7.999999999999994 7.999999999999994 0 0 1 2488 70L 2488 85A 8 8 0 0 1 2472 85z" class="null hole"></path>
    </g>
    <g transform="translate(107.99546409999999 78.2958948) rotate(180)">
      <path id="svg-1" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d=" M0,42 L0,15 A15,15 0 0,1 14.999999999999996,0 L45,0 L45,37 A10.00000000000002,10.00000000000002 0 0,0 55,47.000000000000014 L105,47 L105,52 A5.00000000000002,5.00000000000002 0 0,1 100,57.000000000000014 L15,57 A15.00000000000001,15.00000000000001 0 0,1 -1.0658141036401503e-14,42 z"></path>
      <path id="svg-1" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d=" M6.0000000000000036,15.000000000000002 A8.999999999999996,8.999999999999996 0 0,1 23.999999999999996,14.999999999999998                     A8.999999999999996,8.999999999999996 0 0,1 6.0000000000000036,14.999999999999998 z" class="null hole"></path></g><g transform="translate(374.0830121999998 -1474.658204) rotate(90)">
      <path id="svg-4" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2575.0000000000005 7.780442956573097e-13L 2593.0000000000005 7.283063041541027e-13A 63 63 0 0 0 2656.0000000000005 63.000000000000725L 2656.0000000000005 81.00000000000072A 81 81 0 0 1 2575.0000000000005 7.382259432271963e-13z"></path>
    </g>
  </g>
</svg>

0

<svg width="2496" height="1246">
<rect width="2230" height="1246" fill="none" stroke="#010101" class="bin" transform="translate(0 0)">
</rect>
<g transform="translate(3.0000000000010103 5679.7663694) rotate(270)">
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5624.346889069733 173.3831847043796A 124.0000000000001 124.0000000000001 0 0 0 5503.38318470422 52.41948033886686L 5503.3831847043 61.38318470429999L 5500.3831847043 61.38318470429999L 5500.3831847043 0L 5080.3831847043 2.2737367544323206e-13L 5080.3831847043 61.38318470430022L 5077.3831847043 61.38318470430022L 5077.3831847043 52.41948033890026A 124.0000000000001 124.0000000000001 0 0 0 4956.419480338867 173.38318470437997L 4965.3831847043 173.38318470430022L 4965.3831847043 176.38318470430022L 4904 176.38318470430022L 4904 1546.3831847043002L 4965.3831847043 1546.3831847043002L 4965.3831847043 1549.3831847043002L 4956.4194803389 1549.3831847043002A 124.0000000000004 124.0000000000004 0 0 0 5077.383184704379 1670.3468890697336L 5077.3831847043 1661.3831847043002L 5080.3831847043 1661.3831847043002L 5080.3831847043 1722.7663694086002L 5500.3831847043 1722.7663694086002L 5500.3831847043 1661.3831847043L 5503.3831847043 1661.3831847043L 5503.3831847043 1670.3468890697A 123.9999999999998 123.9999999999998 0 0 0 5624.346889069733 1549.3831847042204L 5615.3831847043 1549.3831847043L 5615.3831847043 1546.3831847043L 5676.7663694086 1546.3831847043L 5676.7663694086 176.3831847043L 5615.3831847043 176.3831847043L 5615.3831847043 173.3831847043L 5624.3468890697 173.3831847043z"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5391.1831847043 811.3831847043002A 21.19999999999991 21.19999999999991 0 0 1 5433.5831847043 811.3831847043002A 21.19999999999991 21.19999999999991 0 0 1 5391.1831847043 811.3831847043002z" class="null hole"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5460.2831847043 646.3831847043002A 20.1 20.1 0 0 1 5500.483184704301 646.3831847043002A 20.1 20.1 0 0 1 5460.2831847043 646.3831847043002z" class="null hole"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5323.7831847043 996.3831847043002A 20.1 20.1 0 0 1 5363.983184704301 996.3831847043002A 20.1 20.1 0 0 1 5323.7831847043 996.3831847043002z" class="null hole"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5429.8831847043 970.3831847043002L 5429.8831847043 964.3831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5430.3831847043 963.8831847043002L 5436.3831847043 963.8831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5436.8831847043 964.3831847043002L 5436.8831847043 970.3831847043002A 0.5000000000000567 0.5000000000000567 0 0 1 5436.3831847043 970.8831847043002L 5430.3831847043 970.8831847043002A 0.4999999999999433 0.4999999999999433 0 0 1 5429.8831847043 970.3831847043002z" class="null hole"></path>
    <path id="svg-7" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 5436.3831847043 1064.8831847043002L 5430.3831847043 1064.8831847043002A 0.5 0.5 0 0 1 5429.8831847043 1064.3831847043002L 5429.8831847043 1058.3831847043002A 0.5000000000000567 0.5000000000000567 0 0 1 5430.3831847043 1057.8831847043002L 5436.3831847043 1057.8831847043002A 0.5000000000000284 0.5000000000000284 0 0 1 5436.8831847043 1058.3831847043002L 5436.8831847043 1064.3831847043002A 0.4999999999999717 0.4999999999999717 0 0 1 5436.3831847043 1064.8831847043002z" class="null hole"></path>
</g>
<g transform="translate(-2663 781.7663693999999) rotate(0)">
    <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2666 0L 2815 0A 1 1 0 0 0 2817 0L 2896.9999999999927 0A 1 1 0 0 0 2898.9999999999927 0L 2979 0A 1 1 0 0 0 2981 0L 4349 0A 1 1 0 0 0 4351 0L 4430.999999999993 0A 1 1 0 0 0 4432.999999999993 0L 4513 0A 1 1 0 0 0 4515 0L 4784 0L 4784 140L 2666 140L 2666 0z"></path>
    <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4110.9707541064 96.9622484514L 4021.2425652562 103.95167801780002A 16 16 0 1 1 4020 72L 4110 72A 12.5 12.5 0 0 1 4110.970754106438 96.96224845141653z" class="null hole"></path>
    <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 3240.9707541064 96.9622484514L 3151.2425652562 103.95167801780002A 16 16 0 1 1 3150 72L 3240 72A 12.5 12.5 0 0 1 3240.970754106438 96.96224845141653z" class="null hole"></path>
    <path id="svg-5" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4734.9707541064 96.9622484514L 4645.2425652562 103.95167801780008A 16 16 0 1 1 4644 72L 4734 72A 12.5 12.5 0 0 1 4734.970754106438 96.96224845141653z" class="null hole"></path>
</g>
<g transform="translate(-912 927.7663694) rotate(0)">
    <path id="svg-11" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2265 0L 915 0L 915 76.99999999999966L 2265 77L 2265 0z"></path>
</g>
<g transform="translate(1358.9963864000001 1227.7663694) rotate(270)">
    <path id="svg-10" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 300 2.8421709430404007e-13L 300 76.99999999999989A 108.0000000000001 108.0000000000001 0 0 0 191.9999999999999 185L 192 605A 108.0000000000001 108.0000000000001 0 0 0 300 713.0000000000001L 300 789.9999999999998A 184.9999999999997 184.9999999999997 0 0 1 115.00000000000034 605L 115 185A 184.9999999999997 184.9999999999997 0 0 1 300 3.410605131648481e-13z"></path>
</g>
<g transform="translate(-4610.0072272 394.6805645) rotate(0)">
    <path id="svg-8" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 6637 713L 6637 789.9999999999999A 184.9999999999999 184.9999999999999 0 0 0 6822 605L 6822 185A 184.9999999999998 184.9999999999998 0 0 0 6637 1.9895196601282805e-13L 6637 77L 6657 77A 108 108 0 0 1 6765 185L 6765 605A 108.0000000000003 108.0000000000003 0 0 1 6657 713.0000000000002L 6637 713z"></path>
</g>
<g transform="translate(7684.080086100001 1112.7663693999991) rotate(180)">
    <path id="svg-9" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 7438 0A 1 1 0 0 0 7437 1.0000000000000002L 7437 59.00000000000004A 1 1 0 0 0 7438 60.00000000000004L 7483.918722720954 60.00000000000004A 1.000000000000006 1.000000000000006 0 0 0 7484.861531762536 59.333333333333385A 2.000000000000002 2.000000000000002 0 1 1 7487.413816512367 61.88561808316417A 1 1 0 0 0 7486.747149845701 62.82842712474614L 7486.747149845701 101A 1 1 0 0 0 7487.747149845701 102L 7630.3329362833 102.0000000000001A 1 1 0 0 0 7631.3329362833 101L 7631.3329362833 62.82842712474614A 0.9999999999999926 0.9999999999999926 0 0 0 7630.666269616634 61.88561808316408A 2.000000000000002 2.000000000000002 0 1 1 7633.218554366465 59.333333333333364A 1 1 0 0 0 7634.161363408047 60.00000000000004L 7680.080086129001 60.00000000000004A 1 1 0 0 0 7681.080086129001 59.00000000000004L 7681.080086129001 1A 1 1 0 0 0 7680.080086129001 0L 7438 0z"></path></g><g transform="translate(2458 1158.7663693999998) rotate(180)">
    <path id="svg-13" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2276 0L 2454 0A 1 1 0 0 1 2455 1L 2455 39A 1 1 0 0 1 2454 40L 2276 40A 1 1 0 0 1 2275 39L 2275 1A 1 1 0 0 1 2276 0z"></path>
</g>
<g transform="translate(-4540.9199139 1010.7663694) rotate(0)">
    <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4794 64.99999999999999L 4804 64.99999999999999L 4804 68L 4804 79.00000000000001A 16 16 0 0 0 4820 95.00000000000001L 4868 95A 16 16 0 0 0 4884 79.00000000000001L 4884 68L 4884 64.99999999999999L 4894 64.99999999999999L 4894 0L 4888 0L 4888 5L 4869 5L 4869 44.99999999999993A 10 10 0 0 1 4859 55L 4829 55A 9.999999999999996 9.999999999999996 0 0 1 4819 45L 4819 4.999999999999986L 4800 5L 4800 0L 4794 0L 4794 64.99999999999999z"></path>
    <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4835 82A 9 9 0 0 1 4853 82A 9 9 0 0 1 4835 82z" class="null hole"></path>
    <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4810 82A 9 9 0 0 1 4828 82A 9 9 0 0 1 4810 82z" class="null hole"></path>
    <path id="svg-6" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 4860 82A 9 9 0 0 1 4878 82A 9 9 0 0 1 4860 82z" class="null hole"></path>
</g>
<g transform="translate(102.94235579999985 -1757.2336306000002) rotate(90)">
    <path id="svg-2" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2465 85L 2465 20A 20.00000000000003 20.00000000000003 0 0 1 2485 -2.8421709430404014e-14L 2533 0L 2533 30L 2505 30A 10 10 0 0 0 2495 40L 2495 85A 15 15 0 0 1 2465 85z"></path>
    <path id="svg-2" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2472 85L 2472 70A 7.999999999999994 7.999999999999994 0 0 1 2488 70L 2488 85A 8 8 0 0 1 2472 85z" class="null hole"></path>
</g>
<g transform="translate(107.99546409999999 78.2958948) rotate(180)">
    <path id="svg-1" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d=" M0,42 L0,15 A15,15 0 0,1 14.999999999999996,0 L45,0 L45,37 A10.00000000000002,10.00000000000002 0 0,0 55,47.000000000000014 L105,47 L105,52 A5.00000000000002,5.00000000000002 0 0,1 100,57.000000000000014 L15,57 A15.00000000000001,15.00000000000001 0 0,1 -1.0658141036401503e-14,42 z"></path>
    <path id="svg-1" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d=" M6.0000000000000036,15.000000000000002 A8.999999999999996,8.999999999999996 0 0,1 23.999999999999996,14.999999999999998                     A8.999999999999996,8.999999999999996 0 0,1 6.0000000000000036,14.999999999999998 z" class="null hole"></path></g><g transform="translate(374.0830121999998 -1474.658204) rotate(90)">
    <path id="svg-4" stroke="black" stroke-width="1" fill="lightcyan" fill-rule="evenodd" fill-opacity="1" d="M 2575.0000000000005 7.780442956573097e-13L 2593.0000000000005 7.283063041541027e-13A 63 63 0 0 0 2656.0000000000005 63.000000000000725L 2656.0000000000005 81.00000000000072A 81 81 0 0 1 2575.0000000000005 7.382259432271963e-13z"></path>
</g>
</svg>

Полагаю, Вы хотели увидеть что-то подобное. P.S. Вашу ширину я немного уменьшила. Если хотите, чтобы прям совсем впритык были детальки к прямоугольнику, то еще немного уменьшите ширину и высоту rect

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.