title: drag svg child after zoom via angular
body: <p>I have two circles in an SVG. the SVG is draggable (with angular9 and material) and can zoom on it via changing the scale. in normal zoom (100%) circles are dragged into SVG very good, but when set new scale for example 1.5 on SVG, circles are dragged Unusually such as bellow image :</p>
  <p>dragged not in mouse position!</p>
  <p><a href="https://i.stack.imgur.com/YBwB6.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YBwB6.gif" alt="enter image description here" /></a></p>
  <p>and image in normal zoom (100%)</p>
  <p><a href="https://i.stack.imgur.com/ryd7F.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ryd7F.gif" alt="enter image description here" /></a></p>
  <p>How can I fix this problem?</p>