Как центрировать SVG-контейнер по вложенной группе? - PullRequest
Новая
       6

Как центрировать SVG-контейнер по вложенной группе?

0 голосов
/ 07 сентября 2018

Я работаю с библиотекой Snap.svg и плагином snapsvgzpd (масштабирование, панорамирование, перетаскивание).Этот плагин оборачивает все элементы svg в пользовательскую группу <g id="snapsvg-zpd-svgSjlry1ey736"> и применяет к ней преобразования.

В этой группе я рисую несколько элементов с преобразованием.Все преобразования элементов применяются относительно этой группы.Первая группа <g id="first-circle"> может иметь разные координаты X и Y, но эта группа всегда должна находиться в центре экрана.Если я правильно понимаю, мне нужно перевести <g id="snapsvg-zpd-svgSjlry1ey736"> влево или вправо (мне нужно учитывать увеличение?).Но я не понимаю, как я могу это сделать.

<svg id="svg" width="1920" height="948">
    <g id="snapsvg-zpd-svgSjlry1ey736" transform="matrix(0.800000011920929,0,0,0.800000011920929,840.0000041723251,-13.999999314546585)">
        <desc>Created with Snap</desc>
        <defs>
            <marker viewBox="-20 -20 40 40" markerWidth="40" markerHeight="40" orient="auto" refX="1" refY="1" id="markerSjlry1ey746">
                <polyline points="-2.5,2,0,0,2.5,2" style="fill: none; stroke-width: 0.9px; stroke: #818181; stroke-linejoin: round; stroke-linecap: round;" transform="matrix(0,1,-1,0,1,1)" class="connection-arrow"></polyline>
            </marker>
        </defs>
        <path d="M 540 220 L 540 290 C 540 295 535 300 530 300 L -410 300 C -415 300 -420 305 -420 310 L -420 339 C -420 344 -420 354 -420 359 L -420 379 " id="from-5b8f9cf548892b29e04f088a-to-5b926755c3a74b20107ff974" style="stroke: rgb(129, 129, 129); fill: none; stroke-width: 2px; stroke-linejoin: round; marker-end: url(&quot;#markerSjlry1ey746&quot;);" class="connection from-5b8f9cf548892b29e04f088a-to-5b926755c3a74b20107ff974"></path>
        <g id="first-circle" class="element" transform="matrix(1,0,0,1,540,180)">
            <g class="internal-1">
                <rect x="-60" y="-60" width="120" height="120" style="fill: none;pointer-events: all;" class="cell"></rect>
            </g>
            <circle cx="0" cy="0" r="40" id="circle-1" fill="#ffffff" style="cursor: move;" stroke="rgb(129, 129, 129)" stroke-width="3" class="element action-element"></circle>
            <text x="50" y="-10" id="label-circle-1" style="font-family: ClearSans, sans-serif; font-size: 14px; cursor: move;" fill="#808080">First circle</text>
        </g>
        <g id="second-circle" class="element" transform="matrix(1,0,0,1,-420,419.99999999999994)">
            <g class="internal-2">
                <rect x="-60" y="-60" width="120" height="120" style="fill: none;pointer-events: all;" class="cell"></rect>
            </g>
            <circle cx="0" cy="0" r="40" id="circle-2" fill="#ffffff" style="cursor: move;" stroke="rgb(129, 129, 129)" stroke-width="3" class="element action-element"></circle>
            <text x="50" y="-10" id="label-5b926755c3a74b20107ff974" style="font-family: ClearSans, sans-serif; font-size: 14px; cursor: move;" fill="#808080" class="action-label-svg">Second circle</text>
        </g>
    </g>
</svg>

JSFiddle

...