SVG <use> внутренне

Question

Я не могу получить SVG use для работы внутри себя.

Я могу получить SVG use для работы для внешних ссылок.

Это работает:

<svg> 
<defs> 
    <symbol id = "foo"> 
     <some svg stuff> 
    </symbol> 
</defs> 
</svg> 

HTML

<svg><use xlink:href="my.svg#foo"/></svg> 

Однако я хочу, чтобы повторно использовать символы внутри в SVG. Так что это не работает:

<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 работает внутри. Посмотрите на этот образец: http://jsfiddle.net/0o4jtntL/

Как вы можете видеть, существует только одна оговорка: определенный символ можно обрезать перед использованием. Поэтому убедитесь, что этот символ нарисован в центре экрана, когда вы его определяете.

<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>