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

xand yは絶対座標であり、dxand dyは（指定されたxandを基準としたy）相対座標です。

私の経験では、要素dxでdyon を使用することは一般的ではありません<text>（たとえば、テキストを配置するためのコードと、それを調整するための別のコードがある場合、コーディングの便宜のために役立つ場合があります）。

dxそしてdy使用時ほとんど有用で<tspan>内側にネスト要素<text>手の込んだ複数行のテキストのレイアウトを確立する要素。

詳細については、SVG仕様のテキストセクションを確認してください。

スコットの回答に加えて、em（フォントサイズ単位）と一緒に使用されるdyは、絶対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」を含めると、テキストの中心を中心に回転します。

CSSを使用してdyを設定することはできません。