我如何在顺风中填充svg

Posted

技术标签:

【中文标题】我如何在顺风中填充svg【英文标题】：how do I fill svg in tailwind 【发布时间】：2021-09-18 17:50:31 【问题描述】：

我使用了下面的代码，但我无法覆盖填充。我看到它已经解决了，但是任何人都可以使用顺风解决吗？

<div className="">   
    <svg className="text-green-600 fill-current"   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>

【问题讨论】：

它现在可用，一些锄头堆栈溢出没有显示它 【参考方案1】：

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

检查工作demo。

【讨论】：

【参考方案2】：

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

<div className="">

    <svg className="text-green-600"   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="currentColor"/>
        <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="currentColor"/>

        <defs>
        </defs>

    </svg>
</div>

【讨论】：

以上是关于我如何在顺风中填充svg的主要内容，如果未能解决你的问题，请参考以下文章

顺风过渡宽度

如何使用 CSS 填充 SVG [重复]

如何在悬停时更改 svg 填充

如何在 HTML 中更改 SVG 中路径的笔触颜色和填充颜色？

如何使存储在 svg 图片的填充字段中的颜色成为变量？

如何在顺风中以自定义高度居中网格行中的元素？