title: Highcharts manually added svg elements not following stock graph on pan
body: <p>I have a click event in my highstock / highchart graph, I have successfully added custom drawing tools such as adding lines and text. Here is the code for that</p>
  
  <pre><code>$('#stockchart-canvas-container').on('click','svg',function(e){
          var svg = $('#stockchart-canvas-container svg')[0];
          var point= svg.createSVGPoint(), svgP
          point.x = e.clientX
          point.y = e.clientY
          svgP = point.matrixTransform(svg.getScreenCTM().inverse());
  
          if(user.selected_tool=='line'){
              if(user.previous_x == undefined &amp;&amp; user.previous_y == undefined) {
                  user.current_x = svgP.x
                  user.current_y = svgP.y
                  user.previous_x = 0
                  user.previous_y = 0
                  $('#stockchart-canvas-container').on('mousemove','svg',function(ev){
                      var svg2 = $('#stockchart-canvas-container svg')[0];
                      var point2= svg.createSVGPoint(), svgP2
                      point2.x = ev.clientX
                      point2.y = ev.clientY
                      svgP2 = point2.matrixTransform(svg2.getScreenCTM().inverse());
                      $('#temp-line').remove()
                      stockchart.renderer.path(['M',
                                          user.current_x,
                                          user.current_y,
                                          'L',
                                          svgP2.x,
                                          svgP2.y,
                                          'Z',
                                          ]).attr({'stroke-width':2,stroke:'#ccc',id:'temp-line'}).add(stockchart.seriesGroup)
                  })
              } else {
                  $('#stockchart-canvas-container').off('mousemove')
                  stockchart.renderer.path(['M',
                                          user.current_x,
                                          user.current_y,
                                          'L',
                                          svgP.x,
                                          svgP.y,
                                          'Z'
                                          ]).attr({'stroke-width':2,stroke:'#ccc'}).add(stockchart.seriesGroup)
                  user.current_x=0
                  user.current_y=0
                  user.previous_x=undefined
                  user.previous_y=undefined
              }
          } else if (user.selected_tool=='text') {
              $('#insert-text-modal').modal('show')
              $('#accept-insert-text').on('click',function(){
                 if($('#text-input').val()){
                  stockchart.renderer.text($('#text-input').val(),svgP.x,svgP.y).add(stockchart.seriesGroup)    
                 }
                 $(this).off('click')
                 $('#insert-text-modal').modal('hide')
              })
          }
      })
  </code></pre>
  
  <p>My problem is that I want the line and the text to follow the stock graph as I pan or zoom the graph. Any ideas how I can do this?</p>