I want to scale an SVG group element, so that it scales and translates to a point which a path is located on. It means that, when I click on the path, the group has to be scaled and centered to the path in a way that the path fits the height or width of the viewport. I really tried lots of ways, like using getBBox() to get height, width, x and y of the path and substract them from the viewports offset. I also tried d3.js to manipulate it. But, I couldn't find a good approach.
This is the HTML including SVG:
<div style="width: 700px; height:600px; border:1px solid #d0d0d0; background: #e8e8e8; margin: 0 auto;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 255.1 170.1" style="enable-background:new 0 0 255.1 170.1;" xml:space="preserve" width="100%" height="100%">
<g id="floorplan">
<path fill="#ED1C24" d="M35.8,51.8h36.3c1.6,0,2.8-1.3,2.8-2.8V22.1c0-1.6-1.3-2.8-2.8-2.8H35.8c-1.6,0-2.8,1.3-2.8,2.8v26.8
C33,50.5,34.3,51.8,35.8,51.8z"/>
<path fill="#4A68B1" d="M209.8,114.3h36.3c1.6,0,2.8-1.3,2.8-2.8V84.6c0-1.6-1.3-2.8-2.8-2.8h-36.3c-1.6,0-2.8,1.3-2.8,2.8v26.8
C207,113,208.3,114.3,209.8,114.3z"/>
<path fill="#F8991D" d="M134.3,158.8h36.3c1.6,0,2.8-1.3,2.8-2.8v-26.8c0-1.6-1.3-2.8-2.8-2.8h-36.3c-1.6,0-2.8,1.3-2.8,2.8v26.8
C131.5,157.5,132.8,158.8,134.3,158.8z"/>
<path fill="#ed2590" d="M13.1,124.3h36.3c1.6,0,2.8-1.3,2.8-2.8V94.6c0-1.6-1.3-2.8-2.8-2.8H13.1c-1.6,0-2.8,1.3-2.8,2.8v26.8
C10.2,123,11.5,124.3,13.1,124.3z"/>
<path fill="#356732" d="M161.1,42.5h36.3c1.6,0,2.8-1.3,2.8-2.8V12.8c0-1.6-1.3-2.8-2.8-2.8h-36.3c-1.6,0-2.8,1.3-2.8,2.8v26.8
C158.2,41.2,159.5,42.5,161.1,42.5z"/>
</g>
</svg>
</div>
This is what it looks like:
And this is somehow what I want to have after clicking on the red path:
