Qual é a diferença entre os atributos x e dx de svg?

Qual é a diferença entre os atributos x e dx de svg (ou y e dy)? Quando seria o momento adequado para usar o atributo de deslocamento do eixo (dx) em vez do atributo de localização (x)?

Por exemplo, tenho notado muitos exemplos de d3 fazendo algo assim

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

Qual é a vantagem ou o raciocínio para definir y e dy quando o seguinte parece fazer a mesma coisa?

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

xe ysão coordenadas absolutas e dxe dysão coordenadas relativas (relativas ao xe especificado y).

Na minha experiência, não é comum o uso de dxe dysobre<text> elementos (embora possa ser útil para a codificação de conveniência, se você, por exemplo, tem algum código para posicionar texto e código, em seguida separado para ajustá-lo).

dxe dysão úteis principalmente ao usar <tspan>elementos aninhados dentro de um <text>elemento para estabelecer layouts de texto multilinhas mais sofisticados.

Para obter mais detalhes, você pode verificar a seção Texto da especificação SVG .

Para aumentar a resposta de Scott, dy usado com em (unidades de tamanho de fonte) é muito útil para alinhar texto verticalmente em relação à coordenada y absoluta. Isso é abordado no exemplo de elemento de texto MDN dy .

Usar dy = 0,35em pode ajudar a centralizar o texto verticalmente, independentemente do tamanho da fonte. Também ajuda se você quiser girar o centro do texto em torno de um ponto descrito por suas coordenadas absolutas.

<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>

Veja no Codepen

Se você não incluir "dy = 0.35em", as palavras giram em torno da parte inferior do texto e depois de 180 alinharão abaixo de onde estavam antes da rotação. Incluir "dy = 0.35em" gira-os em torno do centro do texto.

Observe que dy não pode ser definido usando CSS.