Question

我正在使用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

如何通过嵌套组将SVG容器居中？

0 个答案: