Реагируйте, используя SVG в качестве компонентов, но SVG, в то время как другой

Question

У меня проблемы с рендерингом SVG как компонента React внутри тега td.У меня есть другие SVG в моем проекте, но по какой-то причине этот не хочет появляться вообще.Это делает пространство для этого, но его все пустым.Но если я загружаю другой SVG, который я также использую в качестве компонента реакции, он обнаруживает то же самое.Таким образом, это означает, что должно быть что-то не так с тем, как я представляю SVG как компонент, но я не могу найти, почему, поскольку он выглядит так же, как рабочий.

Вот два SVG, которые я тестировал как компоненты.

Работающий один

    import { h } from "preact";

export const TournamentIcon = () => {
    return (
        <svg viewBox="0 0 24.133 26.408" id="bar-icon">
            <path id="Path_348" data-name="Path 348" class="tournament_icon" d="M36.729,38.945H34.45a4.047,4.047,0,0,0-1.493-2.828c-.471-1.021-.707-.864-.707-2.043a12.129,12.129,0,0,1,.314-2.357,12.061,12.061,0,0,0,2.278-1.178c.079-.079.157-.079.157-.157,6.128-5.185,7.935-10.056,7.071-12.57A1.9,1.9,0,0,0,40.343,16.4a3.513,3.513,0,0,0-2.436.943,4.9,4.9,0,0,0-.707.943H23.215l-.707-.943a3.086,3.086,0,0,0-2.436-.943,1.9,1.9,0,0,0-1.728,1.414c-.864,2.514.943,7.307,6.992,12.492.079.079.157.157.236.157a15.118,15.118,0,0,0,2.278,1.178A7.445,7.445,0,0,1,28.165,34c0,1.178-.236,1.021-.707,2.043a4.536,4.536,0,0,0-1.493,2.828H23.687v1.807H21.958V42.8h16.5V40.674H36.729Zm2.2-20.505a2.012,2.012,0,0,1,1.493-.629c.314,0,.471.314.55.55.471,1.257-.157,4.164-3.221,7.7a8.7,8.7,0,0,0,.157-1.493V21.5h0A4.134,4.134,0,0,1,38.928,18.44ZM19.68,18.361c.079-.236.236-.55.55-.55a1.963,1.963,0,0,1,1.493.629,4.361,4.361,0,0,1,1.1,3.143h0v3.064a9.625,9.625,0,0,0,.157,1.493C19.837,22.447,19.209,19.618,19.68,18.361Z" transform="translate(-18.141 -16.387)" />
        </svg>
    )
}

Не работающий один

    import { h } from "preact";

export const MenuPlusButton = () => {
    return (
        <svg viewBox="0 0 20 20" id="menu-icon">
            <path id="Subtraction_1" data-name="Subtraction 1" className="menu-plus-button" d="M-2170,21a10.012,10.012,0,0,1-10-10,9.934,9.934,0,0,1,2.929-7.071A9.935,9.935,0,0,1-2170,1a9.936,9.936,0,0,1,7.071,2.929A9.934,9.934,0,0,1-2160,11,10.012,10.012,0,0,1-2170,21Zm-6.364-10.909v1.818h5.455v5.455h1.818V11.909h5.454V10.091h-5.454V4.637h-1.818v5.455Z" transform="translate(2526 153)" />
        </svg>
    )
}

Насколько я могу видеть, они выглядят одинаково, если я добавлю это в мой рендеринг

<td className="leaderboard-table-cell"><MenuPlusButton /></td>

Ничто не показывает

, но вот так

<td className="leaderboard-table-cell"><TournamentIcon /></td>

Тот, кто появляется, использует на них те же реквизиты CSS.

Answer 1

Форма находится вне области просмотра.Измените атрибут transform на translate(2180,-1).

svg {
    width: 50px;
    height:50px;
}

<svg viewBox="0 0 20 20" id="menu-icon">
    <path id="Subtraction_1" data-name="Subtraction 1" className="menu-plus-button"
         d="M-2170,21a10.012,10.012,0,0,1-10-10,9.934,9.934,0,0,1,2.929-7.071A9.935,9.935,0,0,1-2170,1a9.936,9.936,0,0,1,7.071,2.929A9.934,9.934,0,0,1-2160,11,10.012,10.012,0,0,1-2170,21Zm-6.364-10.909v1.818h5.455v5.455h1.818V11.909h5.454V10.091h-5.454V4.637h-1.818v5.455Z"
         transform="translate(2180,-1)" />
</svg>