web-dev-qa-db-ja.com

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")
svgd3.js
97
Nathan Reese

xおよびyは絶対座標であり、dxおよびdyは相対座標です（指定されたxおよびyに関連）。

私の経験では、<text>要素でdxおよびdyを使用することは一般的ではありません（ただし、たとえば、テキストを配置したり、それを調整するための別のコード）。

dxおよびdyは、<tspan>要素内にネストされた<text>要素を使用して、より洗練された複数行のテキストレイアウトを確立する場合に最も役立ちます。

詳細については、 SVG仕様のテキストセクション をご覧ください。

88
Scott Cameron

Scottの答えに追加するには、em（フォントサイズ単位）で使用されるdyは、絶対y座標に対してテキストを垂直方向に整列させるのに非常に便利です。これは MDN dy text element example でカバーされています。

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を使用して設定できないことに注意してください。

67
angus l