Есть ли способы добавить

Доброго времени суток господа.

Необходимо реализовать функционал который позволит пользователю ставить фишку на игральный стол

цифры и остальные элементы стола реализованы как <polygon> через js я хотел добавлять <svg> фишки, но к сожалению это не работает. svg добавляется но не отображается. Есть ли варианты как можно это сделать?

<svg  style="pointer-events: none; color:white"    width="78" height="78"> 
        <symbol id="CasinoChip" viewBox="0 0 78 78">
               
        <g>
            <circle class="paint--dK5dj" cx="39.019" cy="38.999" r="38.5" style="fill:white;"></circle>
            <path class="body--3opAy" d="M38.94 12.5A26.5 26.5 0 1 0 65.44 39a26.529 26.529 0 0 0-26.5-26.5zm0 52A25.5 25.5 0 1 1 64.439 39 25.53 25.53 0 0 1 38.94 64.5z"></path>
            <circle class="text-background--1xl5C" cx="39" cy="38.997" r="25.5"></circle>
            <path class="body--3opAy" d="M38.941 0a39 39 0 1 0 39 39 39.046 39.046 0 0 0-39-39zm-2.088 76.439l.483-8.471a28.99 28.99 0 0 1-4.668-.639l-1.783 8.291a37.277 37.277 0 0 1-12.144-5.051l4.6-7.124a29.143 29.143 0 0 1-8.85-8.851l-7.124 4.6a37.28 37.28 0 0 1-5.045-12.13l8.3-1.784a28.99 28.99 0 0 1-.639-4.668l-8.483.482C1.463 40.4 1.44 39.7 1.44 39s.023-1.391.061-2.08l8.478.483a28.99 28.99 0 0 1 .639-4.668l-8.3-1.785a37.275 37.275 0 0 1 5.047-12.142l7.126 4.6a29.143 29.143 0 0 1 8.85-8.851l-4.6-7.125a37.28 37.28 0 0 1 12.142-5.05l1.786 8.3a28.99 28.99 0 0 1 4.668-.639l-.483-8.484c.692-.038 1.388-.061 2.089-.061s1.4.023 2.087.061l-.483 8.484a28.99 28.99 0 0 1 4.668.639L47 2.381a37.276 37.276 0 0 1 12.14 5.05l-4.6 7.126a29.14 29.14 0 0 1 8.849 8.85l7.127-4.6a37.276 37.276 0 0 1 5.044 12.142l-8.3 1.785a28.99 28.99 0 0 1 .64 4.666l8.478-.483c.038.689.061 1.382.061 2.08s-.023 1.4-.062 2.1l-8.477-.486a28.99 28.99 0 0 1-.639 4.668l8.3 1.784a37.282 37.282 0 0 1-5.046 12.132l-7.125-4.6a29.14 29.14 0 0 1-8.849 8.85l4.6 7.125A37.275 37.275 0 0 1 47 75.619l-1.783-8.291a28.99 28.99 0 0 1-4.668.639l.483 8.471c-.691.038-1.386.061-2.087.061s-1.401-.022-2.092-.06z"></path>
        </g>
        </symbol>
        <text style="z-index:10;color:white"class="value--Mqi73 betValue" x="50%" y="50%" font-size="24" dy="8">100</text>    
    </svg>

я использую <use> для удобства и выше показана html разметка в которой есть symbol

<svg viewBox="0 0 866.96 218.3" class="main-svg">                                                    
<g class="dddStandard-wrapper">
    <polygon class="red_color " data-bet-spot-id="1" points="64.5 138.05 64.5 138.27 126.54 138.27 126.54 92.29 64.5 92.24 64.5 138.05"> <use xlink:href="#CasinoChip"></polygon>
</g>
</svg>

выше это разметка самого стола я оставил только полигон цифры 1 для того что бы не была огромная разметка. в ней есть тег use в котором я указываю иконку фишки, но она не отображается