<!DOCTYPE html> <html> <head> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <style> #canvas { width: 500px; height: 300px; border: 1px solid black; } </style> </head> <body> <svg id="canvas" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="50" font-size="20">Drag the formula</text> <text x="10" y="70" font-size="20">Release the mouse to stop dragging</text> <foreignObject id="formula" x="100" y="100" width="200" height="100">  <div xmlns="http://www.w3.org/1999/xhtml" style="font-size: 20px;"> \(x^2 + y^2 = r^2\) </div> </foreignObject> </svg> <script> const canvas = document.getElementById('canvas'); const formula = document.getElementById('formula'); let isDragging = false; let offsetX = 0; let offsetY = 0; function handleMouseDown(event) { isDragging = true; offsetX = event.clientX - formula.getBoundingClientRect().left; offsetY = event.clientY - formula.getBoundingClientRect().top; } function handleMouseMove(event) { if (isDragging) { formula.setAttribute('x', event.clientX - offsetX); formula.setAttribute('y', event.clientY - offsetY); } } function handleMouseUp() { isDragging = false; } canvas.addEventListener('mousedown', handleMouseDown); canvas.addEventListener('mousemove', handleMouseMove); canvas.addEventListener('mouseup', handleMouseUp); </script> </body> </html>