Sự khác biệt giữa thuộc tính x và dx của svg là gì?

Sự khác biệt giữa thuộc tính x và dx của svg (hoặc y và dy) là gì? Khi nào là thời điểm thích hợp để sử dụng thuộc tính dịch chuyển trục (dx) so với thuộc tính vị trí (x)?

Ví dụ: tôi đã nhận thấy rất nhiều ví dụ d3 làm điều gì đó như thế này

chart.append("text")
   .attr("x", 0)
   .attr("y", 0)
   .attr("dy", -3)
   .text("I am a label")

Lợi thế hoặc lý do nào để đặt cả y và dy khi điều sau đây dường như thực hiện cùng một điều?

chart.append("text")
   .attr("x", 0)
   .attr("y", -3)
   .text("I am a label")

xvà ylà các tọa độ tuyệt đối và dxvà dylà các tọa độ tương đối (so với các chỉ định xvà y).

Theo kinh nghiệm của tôi, việc sử dụng dxvà dytrên <text>các phần tử không phổ biến (mặc dù nó có thể hữu ích để mã hóa thuận tiện nếu bạn, ví dụ, có một số mã để định vị văn bản và sau đó mã riêng để điều chỉnh nó).

dxvà dyhầu hết hữu ích khi sử dụng <tspan>các phần tử được lồng bên trong một <text>phần tử để thiết lập bố cục văn bản nhiều dòng đẹp hơn.

Để biết thêm chi tiết, bạn có thể xem phần Văn bản của thông số SVG .

Để thêm vào câu trả lời của Scott, dy được sử dụng với em (đơn vị kích thước phông chữ) rất hữu ích để căn chỉnh văn bản theo chiều dọc so với tọa độ y tuyệt đối. Điều này được đề cập trong ví dụ về phần tử văn bản dy MDN .

Sử dụng dy = 0.35em có thể giúp căn giữa văn bản theo chiều dọc bất kể kích thước phông chữ. Nó cũng hữu ích nếu bạn muốn xoay tâm văn bản của mình xung quanh một điểm được mô tả bằng tọa độ tuyệt đối của bạn.

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

Xem nó trong Codepen

Nếu bạn không bao gồm "dy = 0,35em", các từ sẽ xoay quanh cuối văn bản và sau 180 căn chỉnh bên dưới vị trí trước khi xoay. Bao gồm "dy = 0.35em" sẽ xoay chúng xung quanh tâm của văn bản.

Lưu ý rằng không thể đặt dy bằng CSS.