В чем разница между атрибутами svg x и dx?

В чем разница между атрибутами svg x и dx (или y и dy)? Когда будет подходящее время для использования атрибута сдвига оси (dx) вместо атрибута местоположения (x)?

Например, я заметил много примеров d3, делающих что-то вроде этого

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

В чем преимущество или обоснование установки y и dy, когда кажется, что следующее делает то же самое?

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

xи yявляются абсолютными координатами, а dxи dyявляются относительными координатами (относительно заданного xи y).

По моему опыту, не принято использовать dxи dyна <text>элементах (хотя это может быть полезно для удобства кодирования, если у вас, например, есть некоторый код для размещения текста, а затем отдельный код для его настройки).

dxи dyв основном полезны при использовании <tspan>элементов, вложенных внутри <text>элемента, для создания более привлекательных макетов многострочного текста.

Для получения более подробной информации вы можете ознакомиться с разделом «Текст» спецификации SVG .

Чтобы добавить к ответу Скотта, dy, используемый с em (единицы размера шрифта), очень полезен для вертикального выравнивания текста относительно абсолютной координаты y. Это рассматривается в примере текстового элемента MDN dy .

Использование dy = 0.35em может помочь центрировать текст по вертикали независимо от размера шрифта. Это также помогает, если вы хотите повернуть центр текста вокруг точки, описываемой вашими абсолютными координатами.

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

Посмотреть в Codepen

Если вы не укажете «dy = 0.35em», слова будут вращаться вокруг нижней части текста и после 180 выравниваются под тем местом, где они были до вращения. Включение "dy = 0.35em" поворачивает их вокруг центра текста.

Обратите внимание, что dy нельзя установить с помощью CSS.