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规范的“ 文本”部分。

为了增加Scott的答案，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”可使它们绕文本中心旋转。

请注意，不能使用CSS设置dy。