Question

我在将SVG呈现为td标签内的React组件时遇到问题。我的项目中还有其他SVG，但是由于某种原因，这个SVG根本不想出现。它为它腾出空间，但全部空白。但是，如果我加载另一个也用作反应组件的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

形状在viewBox外部。将tranform属性更改为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>

使用SVG作为组件进行反应，但使用SVG进行反应

1 个答案: