Comment traduire de Dom aux coordonnées SVG et à nouveau

Points clés

• SVG a son propre système de coordonnées défini en fonction de l'attribut viewBox, et peut être mis à l'échelle à n'importe quelle taille. Cela complique l'ajout d'éléments SVG en fonction de la position du curseur, en particulier dans les conceptions réactives.
• SVG intégré dans les pages HTML devient une partie du DOM et peut être utilisé comme d'autres éléments. Cela permet d'éviter la conversion entre les systèmes de coordonnées.
• La conversion des coordonnées DOM en SVG peut être obtenue en extraitant la position et la taille par la méthode getBoundingClientRect(). Cependant, la conversion des coordonnées SVG en DOM est plus difficile et nécessite l'utilisation du propre mécanisme de décomposition de la matrice de SVG.
• SVG ou les éléments individuels peuvent être transformés par traduction, mise à l'échelle, rotation et / ou inclinaison, ce qui affecte les coordonnées finales SVG. La méthode .getScreenCTM() peut être appliquée à n'importe quel élément ainsi qu'au SVG lui-même pour prendre en compte toutes les transformations.

L'utilisation de SVG est relativement simple - jusqu'à ce que vous souhaitiez mélanger les interactions DOM et vectorielles.

SVGS définit son propre système de coordonnées dans son attribut viewBox. Par exemple:

<code class="language-xml"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 600"></svg></code>

Cela définit la largeur de 800 unité et la hauteur de 600 unités à partir de 0,0. Ces unités sont toutes les unités de mesure utilisées pour le dessin, et la partie décimale de l'unité peut être utilisée. Si vous placez ce SVG dans une zone de 800 x 600 pixels, chaque unité SVG doit être mappée directement sur un pixel d'un écran.

Cependant, les images vectorielles peuvent être mises à l'échelle à n'importe quelle taille - en particulier dans les conceptions réactives. Votre SVG peut être réduit à 400 x 300, et peut même étirer la déformation dans 10 x 1000 espace. Si vous voulez les placer en fonction de la position du curseur, il devient plus difficile d'ajouter plus d'éléments à ce SVG.

Remarque: Pour plus d'informations sur les coordonnées SVG, consultez les articles de la fenêtre, Viewbox et Viewbox de Sara Soueidan.

Évitez la conversion des coordonnées

Vous pourrez peut-être éviter complètement la conversion entre les systèmes de coordonnées.

SVG intégré dans les pages HTML (plutôt que des images ou des arrière-plans CSS) devient une partie du DOM et peut être utilisé comme d'autres éléments. Par exemple, un SVG de base contenant un seul cercle:

<code class="language-xml"><svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewbox="0 0 800 600" preserveaspectratio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50"></circle>
</svg></code>

Vous pouvez y appliquer des effets CSS:

<code class="language-css">circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}</code>

Vous pouvez également joindre des gestionnaires d'événements pour modifier les propriétés:

<code class="language-javascript">const mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', (e) => {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
});</code>

L'exemple suivant ajoute trente cercles aléatoires à une image SVG, applique un effet de survol dans CSS et augmente le rayon de dix unités à l'aide de JavaScript lors du clic sur le cercle.

Affichez l'exemple sur Codepen

SVG pour la conversion de coordonnées DOM

Il peut être nécessaire de superposer l'élément DOM sur l'élément SVG - par exemple, afficher un menu ou une boîte d'informations sur le pays actif affiché sur la carte mondiale. En supposant que SVG est intégré dans HTML, les éléments font partie du DOM, de sorte que la position et la taille peuvent être extraites à l'aide de la méthode

. (Ouvrez la console dans l'exemple ci-dessus pour afficher les nouvelles propriétés de cliquer sur le cercle après l'augmentation du rayon.) getBoundingClientRect()

Element.getBoundingClientRect() est pris en charge dans tous les navigateurs et renvoie un objet DomRect avec les attributs de taille de pixels suivants:

• .x et .left: coordonnée x sur le côté gauche de l'élément par rapport à l'origine de la fenêtre
• .right: coordonnée x sur le côté droit de l'élément par rapport à l'origine de la fenêtre
• .y et .top: la coordonnée y du haut de l'élément par rapport à l'origine de la fenêtre
• .bottom: La coordonnée y du bas de l'élément par rapport à l'origine de la fenêtre
• .width: La largeur de l'élément (non prise en charge dans IE8 et ci-dessous, mais la même chose que .right moins .left)
• .height: La hauteur de l'élément (non prise en charge dans IE8 et ci-dessous, mais la même chose que .bottom moins .top)

Toutes les coordonnées sont relatives à la fenêtre de navigateur, ils changent donc à mesure que la page défile. La position absolue sur la page peut être calculée en ajoutant window.scrollX à .left et window.scrollY à .top.

DOM à la conversion de coordonnées SVG

C'est plus difficile. Supposons que vous souhaitiez placer le nouvel élément SVG sur sa Viewbox où l'événement de clic s'est produit. L'objet de gestionnaire d'événements fournit des coordonnées DOM .clientX et .clientY pixels, mais doit être converti en unités SVG.

Vous pourriez penser que vous pouvez calculer les coordonnées des points SVG en appliquant des facteurs de multiplication. Par exemple, si un SVG de 1000 unité de largeur est placé dans un conteneur de 500 pixels de large, vous pouvez multiplier toutes les coordonnées DOM X par 2 pour obtenir la position SVG. Cela ne fonctionnera pas! …

• Le SVG n'est pas garanti d'être parfait pour votre conteneur.
• Si la taille de l'élément change - redimensionne peut-être le navigateur en réponse à l'utilisateur - les facteurs de largeur et de hauteur doivent être recalculés.
• SVG ou un ou plusieurs éléments peuvent être transformés dans l'espace 2D ou 3D.
• Même si vous surmontez ces obstacles, cela ne fonctionne jamais comme vous vous y attendez et il y a souvent des erreurs.

Heureusement, SVG fournit son propre mécanisme de décomposition de matrice pour convertir les coordonnées. La première étape consiste à créer un point sur le SVG en utilisant la méthode createSVGPoint() et à passer les coordonnées d'écran / événement X et Y dans:

<code class="language-xml"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 600"></svg></code>

Vous pouvez ensuite appliquer une transformation matricielle créée à partir de la matrice inverse de la méthode .getScreenCTM() du SVG, qui mappe les unités SVG pour filtrer les coordonnées:

<code class="language-xml"><svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewbox="0 0 800 600" preserveaspectratio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50"></circle>
</svg></code>

SVGP possède désormais des propriétés .x et .y, qui fournissent des coordonnées sur la boîte Viewbox SVG.

Le code suivant place le cercle au point cliqué sur la toile SVG:

<code class="language-css">circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}</code>

Remarque: La méthode createElementNS() est la même que la méthode standard Dom createElement(), sauf qu'elle spécifie un URI de l'espace de noms XML. En d'autres termes, il fonctionne sur les documents SVG plutôt que sur HTML.

Convertir pour transformer les coordonnées SVG

Il y a un autre aspect plus complexe. Un SVG ou un seul élément peut être transformé par traduction, mise à l'échelle, rotation et / ou inclinaison, ce qui affecte les coordonnées SVG finales. Par exemple, la couche <g></g> suivante est 4 fois plus grande que l'unité SVG standard, les coordonnées seront donc un quart des coordonnées contenant le SVG:

<code class="language-xml"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 600"></svg></code>

Le rectangle généré ressemble à a une largeur et une hauteur de 400 unités aux positions 200, 200.

Heureusement, la méthode

peut être appliquée à n'importe quel élément ainsi qu'au SVG lui-même. La matrice générée prend en compte toutes les transformations, vous pouvez donc créer une fonction de conversion simple .getScreenCTM(): svgPoint()

<code class="language-xml"><svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewbox="0 0 800 600" preserveaspectratio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50"></circle>
</svg></code>

La démonstration suivante fonctionne dans tous les navigateurs modernes,

(si vous convertissez JavaScript en ES5, il fonctionne aussi dans IE11!) . Lorsque vous cliquez / cliquez sur SVG, un cercle est ajouté au point de curseur.

Cela se produit également lorsque vous cliquez sur la zone transformée

, mais passant l'élément au lieu du SVG lui-même à la fonction <g></g> pour s'assurer que les coordonnées correctes sont calculées: svgPoint()

Affichez l'exemple sur Codepen

Idéalement, il est préférable d'éviter la conversion DOM TO / à partir de la coordonnée SVG, mais lorsque cela n'est pas possible, utilisez la méthode décrite ci-dessus pour vous assurer que le processus est robuste à toutes les tailles de page.

FAQ sur Dom aux coordonnées SVG et conversion inversée

Quelle est la différence entre les coordonnées DOM et SVG?

Le modèle d'objet de document (DOM) et les graphiques vectoriels évolutifs (SVG) sont tous deux des composants du développement Web, mais ils ont des utilisations différentes. DOM est l'interface de programmation pour les documents HTML et XML. Il représente la structure d'un document et fournit un moyen de manipuler son contenu et sa représentation visuelle. D'un autre côté, SVG est un format d'image vectoriel basé sur XML pour les graphiques bidimensionnels. La principale différence entre les deux est leur système de coordonnées. Dom utilise un système de coordonnées basé sur des pixels, tandis que SVG utilise un système basé sur l'attribut

, qui peut être mis à l'échelle et transformé. viewBox

Comment convertir les coordonnées DOM en coordonnées SVG?

La conversion des coordonnées DOM en coordonnées SVG implique la création d'un point dans le système de coordonnées SVG en utilisant la méthode

de l'élément SVG. Vous pouvez ensuite utiliser la méthode createSVGPoint pour convertir le point en un système de coordonnées SVG. Cette méthode prend un objet Dommatrix, qui représente la matrice de transformation de l'élément SVG. matrixTransform

Comment convertir les coordonnées SVG en coordonnées DOM?

Pour convertir les coordonnées SVG en coordonnées DOM, vous pouvez utiliser la méthode

de l'objet SVGMatrix. Cette méthode renvoie un nouvel objet SVGMatrix, qui est la matrice inverse de la matrice d'origine. En multipliant les points SVG par cette matrice inverse, vous pouvez la reconvertir au système de coordonnées DOM. inverse

Quel est le rôle de l'attribut Viewbox dans SVG?

L'attribut

dans

dans SVG est utilisé pour spécifier le rapport d'aspect et le système de coordonnées de l'image SVG. Il vous permet de contrôler la mise à l'échelle et le positionnement des éléments SVG. L'attribut viewBox prend quatre valeurs: min-x, min-y, largeur et hauteur. Ces valeurs définissent le rectangle dans le système de coordonnées SVG. viewBox

Comment utiliser le package DOM vers SVG dans mon projet?

Dom en package SVG est un outil utile pour convertir les coordonnées DOM en coordonnées SVG et conversion inversée. Pour l'utiliser dans votre projet, vous devez l'installer à l'aide de NPM (le gestionnaire de packages pour le langage de programmation JavaScript). Une fois installé, vous pouvez le présenter dans votre fichier JavaScript et effectuer la conversion à l'aide de ses méthodes.

Quel est l'attribut CX dans SVG?

L'attribut

dans cx dans SVG est utilisé pour spécifier la coordonnée x du centre du cercle. C'est l'une des propriétés de base pour créer un cercle SVG. La valeur de l'attribut cx est la longueur du système de coordonnées utilisateur.

Puis-je utiliser à la fois DOM et SVG dans ma page Web?

Oui, vous pouvez utiliser DOM et SVG dans votre page Web. SVG est intégré dans HTML, il fait donc partie du DOM. Vous pouvez utiliser des méthodes et des propriétés DOM pour manipuler les éléments SVG. Cela vous permet de créer des graphiques dynamiques et interactifs sur vos pages Web.

En quoi le système de coordonnées dans SVG est-il différent de celui de HTML?

Le système de coordonnées dans SVG est différent de celui de HTML. Dans HTML, le système de coordonnées est basé sur des pixels et l'origine est dans le coin supérieur gauche de la page. Dans SVG, le système de coordonnées est défini par l'attribut viewBox, et l'origine est dans le coin supérieur gauche de viewBox. Cela rend les graphiques SVG évolutifs et indépendants de la résolution.

Comment convertir les coordonnées SVG?

Vous pouvez utiliser l'attribut transform pour convertir les coordonnées SVG. Cette propriété vous permet d'appliquer diverses transformations aux éléments SVG, tels que la traduction, la rotation, la mise à l'échelle et l'inclinaison. La valeur de l'attribut transform est une liste des fonctions de transformation, chaque fonction est appliquée aux éléments de l'ordre indiqué.

Quels sont les cas d'utilisation courants pour la conversion entre les coordonnées DOM et SVG?

Dans de nombreux cas, il est très utile de convertir entre les coordonnées DOM et SVG. Par exemple, si vous créez un graphique SVG interactif, vous devrez peut-être convertir des coordonnées de souris (situées dans le système de coordonnées DOM) en coordonnées SVG pour manipuler l'élément SVG. Au lieu de cela, si vous créez un élément SVG personnalisé, vous devrez peut-être convertir ses coordonnées au système de coordonnées DOM pour le placer correctement sur la page.

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!