Comment puis-je connecter des divisions HTML avec des lignes à l'aide de SVG ?

Connexion de divs HTML avec des lignes

En HTML et CSS, vous pouvez tracer des lignes pour connecter des divs à l'aide de graphiques vectoriels évolutifs (SVG). Cette méthode vous permet de créer des lignes entre les divs sans utiliser d'élément canevas.

Étape 1 : Définir les divs

Définissez les divs que vous souhaitez connecter à l'aide des styles CSS pour leur taille, leur position et leur couleur d'arrière-plan :

<div>

Étape 2 : Créer un SVG Ligne

Dans un élément SVG, définissez la ligne pour connecter les divs à l'aide des attributs x1, y1, x2 et y2 :

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

Dans cette ligne, x1 et y1 représentent le centre de div1, et x2 et y2 représentent le centre de div2.

Étape 3 : Position le SVG

L'élément SVG doit être placé dans le HTML à côté des divs. Il agit comme un élément visuel qui les relie.

Résultat :

Les divs seront reliés par une ligne noire. Vous pouvez ajuster les attributs de la ligne (par exemple, la couleur du trait, l'épaisseur) dans le SVG pour personnaliser son apparence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!