Яка різниця між атрибутом x і dx svg?

Яка різниця між атрибутом x і dx svg (або 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.