如何缩放svg画布上除某些路径/文本以外的所有内容，而无需更改其确切位置

Question

I want to zoom all things except some paths / text on an svg canvas without changing the path / text exact position using svgpanzoom js. The actual working of my needs is something like a map with some markers on it, I also want to dynamically place new pin or markers also ...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="640px" height="480px" viewBox="0 0 640 480">
<g id="viewport">
<rect x="27" y="33" fill="#14A0E8" width="134" height="134"/>
<rect x="27" y="167" fill="#8ABB50" width="134" height="134"/>
<rect x="161" y="231" fill="#F97659" width="134" height="134"/>
<rect x="295" y="167" fill="#14A0E8" width="134" height="134"/>
<rect x="57" y="365" fill="#8ABB50" width="372" height="57"/>
<rect x="161" y="33" fill="#CCCC99" width="134" height="134"/>
<rect x="429" y="33" fill="#F97659" width="134" height="134"/>
<rect x="429" y="301" fill="#F97659" width="134" height="64"/>
<rect x="429" y="202" fill="#CCCC99" width="134" height="64"/>
<g class="noZoom">
<path d="M103.912,213.845c0,5.248-6.218,9.378-9.502,14.649c-4.293-5.507-9.501-9.401-9.501-14.649s4.254-9.501,9.501-9.501
S103.912,208.598,103.912,213.845z"/>
<circle fill="#FFFFFF" cx="94.548" cy="212.497" r="3.349"/>
</g>
<g class="noZoom">
<path d="M480.912,334.846c0,5.247-6.219,9.378-9.502,14.648c-4.293-5.508-9.502-9.401-9.502-14.648
c0-5.248,4.254-9.502,9.502-9.502C476.657,325.344,480.912,329.598,480.912,334.846z"/>
<circle fill="#FFFFFF" cx="471.548" cy="333.496" r="3.349"/>
</g>
<text class="noZoom" transform="matrix(1 0 0 1 80.1992 240)" font-size="8">Marker 1</text>
<text class="noZoom" transform="matrix(1 0 0 1 459.1992 359.5)" font-size="8">Marker 2</text>
<text class="noZoom" transform="matrix(1 0 0 1 201.1992 204.3438)" font-size="8">Some Information</text>
<text class="noZoom" transform="matrix(1 0 0 1 325.6992 274.3438)" font-size="8">Some Another Information</text>
</g>
</svg>

Above shown is an example of the svg that looks like and I am trying to zoom all things inside SVG but the markers and text should be in same place itself without increaing its zooming level

I am using the svgpanzoom

Answer 1

You can zoom one group element. You can place in it any elements you want. Documentation . Demo .

Answer 2

I've done similar thing by adding listener to onZoom event. In this listener I've increased font size of text elements and stroke width of paths depending on scale factor. Another way is to have separate group for noZoom elements and listen to onPan event where you can get new x and y translation and call getZoom to obtain new CTM and as result change coordinates of each noZoom element.