svg的x和dx屬性有什么區別？

Question

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

Answer 1

x和y是絕對坐標， dx和dy是相對坐標（相對於指定的x和y ）。

根據我的經驗，在<text>元素上使用dx和dy並不常見（例如，如果你有一些代碼用於定位文本然后單獨的代碼來調整它，那么它可能對編碼方便有用）。

當使用嵌套在<text>元素內的<tspan>元素來建立更高級的多行文本布局時， dx和dy非常有用。

有關更多詳細信息，請查看SVG規范的文本部分 。

Answer 2

要添加到Scott的答案中，與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。