svg - 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 )。

根据我的经验，使用dx并不常见。和dy上<text>元素(尽管这可能有助于编码方便，例如，如果您有一些用于定位文本的代码，然后使用单独的代码来调整它)。

dx和dy使用 <tspan> 时最有用嵌套在 <text> 内的元素元素来建立更精美的多行文本布局。

欲了解更多详情，您可以查看Text section of the SVG spec .