Почему SVG не отображает объект, на который ссылается тег <use>?

Question

Недавно я пытался научиться создавать графику с помощью SVG и столкнулся с проблемой при попытке отобразить изображение с тегом 'use'.

Я успешно поэкспериментировал с тэгом 'use' для создания дубликатов объектов в других svgs, поэтому я не уверен, что здесь происходит. Моя попытка отобразить этот символ с тегом «use» приводит к невидимому объекту с 0x0 как ширина x высота

<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
    <g id="yinyang">
    <circle r="39"/>
    <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
    <circle cy="19" r="5" fill="#fff"/>
    <circle cy="-19" r="5"/>
    <g/>
    <use href="#yinyang" transform="scale(20)"/>
</svg>

Как я могу это исправить?

Answer 1

Может быть просто опечатка с тегом закрывающей группы <g/>

<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
    <defs>
       <g id="yinyang">
        <circle r="39"/>
        <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
        <circle cy="19" r="5" fill="#fff"/>
        <circle cy="-19" r="5"/>
      </g>
    </defs>
    
    <use href="#yinyang" transform="scale(0.9)"/>
</svg>

Кроме того, блок использования будет повторять форму, которая уже видна. Если вы просто хотите определить его где-то и повторно использовать в другом месте, вы можете поместить его в <defs> блок