html - SVG rect を親要素の右下に揃える

Question

SVG (300x300 ピクセル) で四角形を描画し、親四角形 (10x10 ピクセル) の各隅に 4 つの小さな四角形を配置しようとしていますが、すべての小さな子四角形は親四角形のフルサイズです。

<svg width="300" height="300">
    <svg height="10" width="10" />
    <svg height="10" width="10" />
    <svg height="10" width="10" />
    <svg height="10" width="10" />
</svg>

ここで私の結果を見ることができます: http://jsfiddle.net/8tY3b/

内側の SVG 要素の幅または高さを 10px に設定すると、右下以外のすべてのエッジで機能します。

子要素を親要素の右下に揃える方法はありますか?