Quelle est la différence entre les attributs x et dx de svg?

Quelle est la différence entre les attributs x et dx de svg (ou y et dy)? Quel serait le bon moment pour utiliser l'attribut de décalage d'axe (dx) par rapport à l'attribut d'emplacement (x)?

Par exemple, j'ai remarqué de nombreux exemples d3 faisant quelque chose comme ça

chart.append("text")
   .attr("x", 0)
   .attr("y", 0)
   .attr("dy", -3)
   .text("I am a label")

Quel est l'avantage ou le raisonnement pour 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("I am a label")

xet ysont des coordonnées absolues et dxet dysont des coordonnées relatives (par rapport au xet spécifié y).

D'après mon expérience, il n'est pas courant d'utiliser dxet dysur des <text>éléments (bien que cela puisse être utile pour la commodité du codage si, par exemple, vous avez du code pour positionner le texte, puis un code séparé pour l'ajuster).

dxet dysont surtout utiles lors de l'utilisation d' <tspan>éléments imbriqués dans un <text>élément pour établir des mises en page de texte multilignes plus sophistiquées.

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

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

L'utilisation de dy = 0,35em peut aider à centrer verticalement le texte quelle que soit la taille de la 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.

<style>
text { fill: black; text-anchor: middle; }
line { stroke-width: 1; stroke: lightgray; }
</style>


<script>
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");

// Without the dy=0.35em offset
group.append("text")
    .text("My text")
    .attr("x",function (d) {return d;})
    .attr("y",100)
    .attr("transform", function(d, i) {return "rotate("+45*i+","+d+",100)";});

// With the dy=0.35em offset
group.append("text")
    .text("My text")
    .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>

Voir dans Codepen

Si vous n'incluez pas "dy = 0.35em", les mots tournent autour du bas du texte et après 180, s'alignent en dessous de leur emplacement avant la rotation. Inclure "dy = 0.35em" les fait pivoter autour du centre du texte.

Notez que dy ne peut pas être défini à l'aide de CSS.