程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了我如何在顺风中填充 svg大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决我如何在顺风中填充 svg?

开发过程中遇到我如何在顺风中填充 svg的问题如何解决?下面主要结合日常开发的经验,给出你关于我如何在顺风中填充 svg的解决方法建议,希望对你解决我如何在顺风中填充 svg有所启发或帮助;

我使用了下面的代码,但我无法覆盖填充。我看到它已解决,但有人可以使用顺风解决吗?

<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>
                                        </div>

解决方法

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

检查工作demo。

,

与 Tailwind 无关但可能有用 - 您可以将填充更改为 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 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全部内容,希望文章能够帮你解决我如何在顺风中填充 svg所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。