В чем разница между атрибутами svg x и dx?

Question

В чем разница между атрибутами 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")

655 2

svg

2 ответов:

Comments

Ничего не найдено.

Scott Cameron · Accepted Answer · 2013-10-02 01:52:05

x и y абсолютные координаты и dx и dy - относительные координаты (относительно указанного x и y).

по моему опыту, это не принято использовать dx и dy on <text> элементы (хотя это может быть полезно для удобства кодирования, если у вас, например, есть некоторый код для позиционирования текста, а затем отдельный код для его настройки).

dx и dy в основном полезны при использовании <tspan> вложенные элементы внутри <text> элемент для создания декоративной многострочного текста.

для более подробной информации вы можете проверить текстовый раздел спецификации SVG.

angus l · Accepted Answer · 2017-01-26 13:37:58

чтобы добавить к ответу Скотта, DY, используемый с em (единицы размера шрифта), очень полезен для вертикального выравнивания текста относительно абсолютной координаты Y. Это хорошо освещено в ссылка на текстовый элемент D3.

использование dy=0.35 em может помочь вертикально центрировать текст независимо от размера шрифта. Это также помогает, если вы хотите повернуть центр текста вокруг точки, описанной вашими абсолютными координатами.
<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,height:300});

svg.append("line").attr({x1:0,x2:500,y1:100,y2:100});
svg.append("line").attr({x1:0,x2:500,y1:200,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>
Если вы не включаете "dy=0.35 em", то слова вращаются вокруг нижней части текста и после 180 выровнять ниже, где они были до поворота. В том числе "dy=0.35 em" вращает их вокруг центра текста.

обратите внимание, что dy не может быть установлен с помощью CSS.