[svg] svg의 x와 dx 속성의 차이점은 무엇입니까?

Program / 글쓴이

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의 대답에 추가하기 위해 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”을 포함하면 텍스트 중앙을 중심으로 회전합니다.

dy는 CSS를 사용하여 설정할 수 없습니다.

답변