Quelle est la différence entre l'attribut x et dx de la balise SVG ?

Question

Quelle est la différence entre l'attribut x et dx de svg (ou y et dy)? Quand serait-il approprié d'utiliser l'attribut de décalage d'axe (dx) par rapport à l'attribut de localisation (x)?

Par exemple, j'ai remarqué que de nombreux exemples de d3 font quelque chose comme ceci

chart.append("text")
   .attr("x", 0)
   .attr("y", 0)
   .attr("dy", -3)
   .text("Je suis une étiquette")

Quel est l'avantage ou la raison de définir à la fois y et dy lorsque ce qui suit semble faire la même chose?

chart.append("text")
   .attr("x", 0)
   .attr("y", -3)
   .text("Je suis une étiquette")

Answer 1

x et y sont des coordonnées absolues et dx et dy sont des coordonnées relatives (par rapport aux x et y spécifiés).

Dans mon expérience, il n'est pas courant d'utiliser dx et dy sur des éléments (bien que cela puisse être utile pour la commodité de la programmation si vous avez par exemple du code pour positionner du texte puis du code séparé pour l'ajuster).

dx et dy sont surtout utiles lors de l'utilisation d'éléments imbriqués dans un élément pour établir des mises en page de texte multi-lignes plus élaborées.

Pour plus de détails, vous pouvez consulter la section Texte de la spécification SVG.

Answer 2

Pour ajouter à la réponse de Scott, dy utilisé avec em (unités de taille de police) est très utile pour aligner verticalement le texte par rapport à la coordonnée y absolue. Cela est expliqué dans l' exemple d'élément de texte dy de MDN.

L'utilisation de dy=0.35em peut aider à centrer verticalement le texte indépendamment de la taille de police. Cela aide également si vous souhaitez faire pivoter le centre de votre texte autour d'un point décrit par vos coordonnées absolues.

text { fill: black; text-anchor: middle; }
line { stroke-width: 1; stroke: lightgray; }

dataset = d3.range(50,500,50);

svg = d3.select("body").append("svg");
svg.attr('width',500).attr('height', 500);

svg.append("line").attr('x1', 0).attr('x2', 500).attr('y1', 100).attr('y2', 100);
svg.append("line").attr('x1', 0).attr('x2', 500).attr('y1', 200).attr('y2', 200);

group = svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g");

// Sans le décalage dy=0.35em
group.append("text")
    .text("Mon texte")
    .attr("x",function (d) {return d;})
    .attr("y",100)
    .attr("transform", function(d, i) {return "rotate("+45*i+","+d+",100)";});

// Avec le décalage dy=0.35em
group.append("text")
    .text("Mon texte")
    .attr("x",function (d) {return d;})
    .attr("y",200)
    .attr("dy","0.35em")
    .attr("transform", function(d, i) {return "rotate("+45*i+","+d+",200)";});
<script>
</code></pre>

<p><a href="https://codepen.io/anon/pen/ZPEgoE" rel="noreferrer">Voir sur Codepen</a></p>

<p>Si vous n'incluez pas "dy=0.35em", les mots tournent autour du bas du texte et après 180 ​​se réalignent en dessous de leur position avant la rotation. En incluant "dy=0.35em", ils tournent autour du centre du texte.</p>

<p>Remarquez que dy ne peut pas être défini en utilisant du CSS.</p></x-turndown>