next.js 如何在顺风中填充svg

kiz8lqtg 于 2023-08-04 发布在其他

关注(0)|答案(2)|浏览(98)

我使用下面的代码，但我不能覆盖填充。我看到它被解决了，但任何人都可以解决使用顺风？

<div className="">   
    <svg className="text-green-600 fill-current" width="52" height="52" viewBox="0 0 52 52"  xmlns="http://www.w3.org/2000/svg">
        <path d="M29.25 17.875C29.25 17.444 29.0788 17.0307 28.774 16.726C28.4693 16.4212 28.056 16.25 27.625 16.25C27.194 16.25 26.7807 16.4212 26.476 16.726C26.1712 17.0307 26 17.444 26 17.875V22.75H21.125C20.694 22.75 20.2807 22.9212 19.976 23.226C19.6712 23.5307 19.5 23.944 19.5 24.375C19.5 24.806 19.6712 25.2193 19.976 25.524C20.2807 25.8288 20.694 26 21.125 26H26V30.875C26 31.306 26.1712 31.7193 26.476 32.024C26.7807 32.3288 27.194 32.5 27.625 32.5C28.056 32.5 28.4693 32.3288 28.774 32.024C29.0788 31.7193 29.25 31.306 29.25 30.875V26H34.125C34.556 26 34.9693 25.8288 35.274 25.524C35.5788 25.2193 35.75 24.806 35.75 24.375C35.75 23.944 35.5788 23.5307 35.274 23.226C34.9693 22.9212 34.556 22.75 34.125 22.75H29.25V17.875Z" fill="#7400B8"/>
        <path d="M1.625 3.25C1.19402 3.25 0.780698 3.4212 0.475951 3.72595C0.171205 4.0307 0 4.44402 0 4.875C0 5.30598 0.171205 5.7193 0.475951 6.02405C0.780698 6.32879 1.19402 6.5 1.625 6.5H5.2325L6.53575 11.7227L11.4042 37.674C11.474 38.0464 11.6716 38.3827 11.963 38.6248C12.2543 38.8669 12.6212 38.9996 13 39H16.25C14.5261 39 12.8728 39.6848 11.6538 40.9038C10.4348 42.1228 9.75 43.7761 9.75 45.5C9.75 47.2239 10.4348 48.8772 11.6538 50.0962C12.8728 51.3152 14.5261 52 16.25 52C17.9739 52 19.6272 51.3152 20.8462 50.0962C22.0652 48.8772 22.75 47.2239 22.75 45.5C22.75 43.7761 22.0652 42.1228 20.8462 40.9038C19.6272 39.6848 17.9739 39 16.25 39H39C37.2761 39 35.6228 39.6848 34.4038 40.9038C33.1848 42.1228 32.5 43.7761 32.5 45.5C32.5 47.2239 33.1848 48.8772 34.4038 50.0962C35.6228 51.3152 37.2761 52 39 52C40.7239 52 42.3772 51.3152 43.5962 50.0962C44.8152 48.8772 45.5 47.2239 45.5 45.5C45.5 43.7761 44.8152 42.1228 43.5962 40.9038C42.3772 39.6848 40.7239 39 39 39H42.25C42.6288 38.9996 42.9957 38.8669 43.287 38.6248C43.5784 38.3827 43.776 38.0464 43.8457 37.674L48.7207 11.674C48.7647 11.4395 48.7564 11.1981 48.6965 10.9672C48.6366 10.7362 48.5266 10.5213 48.3743 10.3376C48.222 10.154 48.0311 10.0061 47.8151 9.90454C47.5992 9.80298 47.3636 9.75022 47.125 9.75H9.3925L8.07625 4.48175C7.98853 4.13005 7.78574 3.81777 7.50013 3.59458C7.21451 3.37139 6.86248 3.2501 6.5 3.25H1.625ZM14.3487 35.75L10.0815 13H45.1685L40.9012 35.75H14.3487ZM19.5 45.5C19.5 46.362 19.1576 47.1886 18.5481 47.7981C17.9386 48.4076 17.112 48.75 16.25 48.75C15.388 48.75 14.5614 48.4076 13.9519 47.7981C13.3424 47.1886 13 46.362 13 45.5C13 44.638 13.3424 43.8114 13.9519 43.2019C14.5614 42.5924 15.388 42.25 16.25 42.25C17.112 42.25 17.9386 42.5924 18.5481 43.2019C19.1576 43.8114 19.5 44.638 19.5 45.5ZM42.25 45.5C42.25 46.362 41.9076 47.1886 41.2981 47.7981C40.6886 48.4076 39.862 48.75 39 48.75C38.138 48.75 37.3114 48.4076 36.7019 47.7981C36.0924 47.1886 35.75 46.362 35.75 45.5C35.75 44.638 36.0924 43.8114 36.7019 43.2019C37.3114 42.5924 38.138 42.25 39 42.25C39.862 42.25 40.6886 42.5924 41.2981 43.2019C41.9076 43.8114 42.25 44.638 42.25 45.5Z" fill="#7400B8"/>
        <defs>
        </defs>
    </svg>

字符串

next.js

来源：https://stackoverflow.com/questions/68298632/how-do-i-fill-svg-in-tailwind

2条答案

按热度按时间

idv4meu81#

您需要从每个path元素中删除fill="#7400B8"属性。
检查工作demo。

赞(0）回复(0）举报 2023-08-04

wribegjk2#

与Tailwind无关，但可能有用-您可以将fill更改为fill="currentColor"，并仅将颜色类text-green-600添加到父类（在fill-current中不需要）

<div className="">

    <svg className="text-green-600" width="52" height="52" viewBox="0 0 52 52"  xmlns="http://www.w3.org/2000/svg">

        <path d="M29.25 17.875C29.25 ..." fill="currentColor"/>
        <path d="M1.625 3.25C1.19402 ..." fill="currentColor"/>

        <defs>
        </defs>

    </svg>
</div>

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 如何在顺风中填充svg

2条答案

相关问题

热门标签

最新问答