5

情報を表示するために SVG を使用し、 を使用し<path>て楕円上に動的な量の位置を配置するアプリケーションを作成しています。ただし、左下隅のポイントは、本来あるべき場所を超えて出てきていました。そこで、ポイントがどこにあるかを確認するための簡単なスクリプトを作成し、これを作成しました (Chrome JS コンソール経由で挿入:

a = document.getElementById("svg-table-underlay");
len = a.getTotalLength();
for (i = 0; i < len - 1; i++) {
    line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttributeNS(null, "x1", a.getPointAtLength(i).x);
    line.setAttributeNS(null, "y1", a.getPointAtLength(i).y);
    line.setAttributeNS(null, "x2", a.getPointAtLength(i + 1).x);
    line.setAttributeNS(null, "y2", a.getPointAtLength(i + 1).y);
    line.setAttributeNS(null, "style", "stroke:#ff0000; stroke-width:3;");
    document.getElementById("svg-dragto").appendChild(line);
}

楕円のあるパスは次のように表されます

<path d="M 212,250 A 300,140 0 1 0 212,249 Z" id="svg-table-underlay" fill="url(#wood)" />

問題が見つかりました。左下隅のポイントが奇妙に計算され、getPointAtLength() 関数が正しくないポイントを返す原因となっています。ただし、楕円自体は正しく描画されます。これの原因は何ですか?それを回避する方法はありますか? (私は Chrome 21 を使用していますが、これは WebKit ブラウザーでのみ動作する必要があります)

パス トレーシングの奇妙さ

4

1 に答える 1

1

2つの円弧で楕円を描くことができます...

<path d="M 20, 200
        a 300,140 0 1,0 600,0
        a 300,140 0 1,0 -600,0
        z " id="svg-table-underlay" fill="#000" />

300 はrx、140 はry、600 はrx * 2

http://jsfiddle.net/z6tTY/

于 2012-09-04T09:04:38.647 に答える