SVG <use> internally - html

Question

I cannot get SVG use to work internal to itself.
I can get SVG use to work for external references.
This works:
<svg>
<defs>
<symbol id = "foo">
<some svg stuff>
</symbol>
</defs>
</svg>
HTML
<svg><use xlink:href="my.svg#foo"/></svg>
However I want to re-use symbols internally in the SVG. So this doesn't work:
<svg>
<defs>
<symbol id = "foo">
<some svg stuff>
</symbol>
</defs>
<g id = "foo-bar">
<use xlink:href="#foo"/>
</g>
</svg>
HTML
<svg><use xlink:href="#my.svgfoo-bar"/></svg>

Answer 1

use does work internally. Look at this sample: http://jsfiddle.net/0o4jtntL/
As you can see, there is only one caveat: the defined symbol can be croped before being used. So be sure that this symbol is drawn at the center of your screen when you define it.
<svg>
<defs>
<symbol id = "foo">
<circle cx="0" cy="0" r="10" fill="red" stroke="black"/>
</symbol>
</defs>
<g id = "foo-bar">
<use x="20" y="20" xlink:href="#foo"/>
<use x="0" y="50" xlink:href="#foo"/>
<use x="40" y="10" xlink:href="#foo"/>
</g>
</svg>