Prompt pour obtenir la représentation svg V2
Créez un fichier HTML utilisant Bootstrap 4 qui inclut :
Un composant SVG interactif :
Dimensions : height="100%" width="100%".
Contenu : Deux cercles avec les propriétés suivantes :
Rayon : Modifiable (R1, R2).
Espacement entre centres (S) : Modifiable.
Position des centres :
Cercle 1 : (x1, y1) (fixe).
Cercle 2 : (x2, y2) où x2 = x1 + S.
Style :
Cercles tracés en noir, contour de 1px sans remplissage.
Calculs et tracés supplémentaires :
Points de tangence externes :
Calculer les 4 points de tangence (2 par cercle).
Tracer en vert les tangentes externes supérieure et inférieure reliant ces points.
Ligne entre centres :
Tracer une ligne rouge reliant les centres des cercles (S).
ViewBox dynamique :
Définir automatiquement la vue du SVG en fonction des positions et dimensions des cercles et des tangentes.
Interface utilisateur :
Ajouter un bouton "Calculer" :
Génère le tracé SVG en fonction des valeurs définies pour R1, R2, et S.
Utiliser des classes Bootstrap pour styliser les contrôles (boutons et champs de saisie).