Zoom into SVG
1 2 <svg xmlns="http://www.w3.org/2000/svg" width="100%" 3 xmlns:xlink="http://www.w3.org/1999/xlink" id="cont" viewBox="0 0 300 100"> 4 <g> 5 <g id="sketch" class="sketch"> 6 <rect x="130" 7 y="6" width="20px" height="10px" fill="yellow" onclick="zoomIn()" /> 8 </g> 9 </g> 10 11 <script> 12 <![CDATA[ 13 function zoomIn(){ 14 15 document.getElementById('sketch').parentNode.setAttribute('transform','translate(-70 ,-6)') 16 document.getElementById('sketch').setAttribute('transform','scale(1.5)') 17 } 18 ]]> 19 </script> 20 </svg> 21
I started off experimenting with viewBox however for simplicity, transform seems better suited for zoom, and panning.
Reference:
Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114 [w3.org]
Example for viewbox control [carto.net]