javascript – Comment zoomer et faire défiler un élément

Ci-dessous le code de ma page avec quelques boutons pour zoomer et dézoomer un carré bleu dessiné avec un élément. Plus ou moins cela fonctionne, mais lorsque je fais un zoom avant et que des barres de défilement apparaissent, lorsque je les fais glisser, je ne peux pas voir complètement le carré, il semble coupé si la fenêtre d’affichage.

J’ai aussi essayé de jouer avec l’attribut viewBox dans le mais je n’ai probablement pas bien compris comment cela fonctionne, peut-être que c’est la bonne façon de procéder….

Comment pourrais-je modifier ce code pour obtenir le résultat que je recherche de manière robuste et élégante ?

    
    
    


    

        
    
    zoom in
    zoom out