设置SVG图片的颜色-color:#f50

最新推荐文章于 2024-08-26 08:00:00 发布

IT码农-爱吃辣条

最新推荐文章于 2024-08-26 08:00:00 发布

阅读量443

点赞数

分类专栏： css 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_24504591/article/details/131395406

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

让svg图片的颜色跟随元素的color值变化：

在path/react等标签中将fill改为fill=“currentColor”

<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <linearGradient x1="50%" y1="50%" x2="100%" y2="75.5102041%" id="linearGradient-1">
            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
            <stop stop-color="#FFFFFF" stop-opacity="0.803501796" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="菜单栏" transform="translate(-52.000000, -51.000000)">
            <g id="编组-3" transform="translate(52.000000, 51.000000)">
                <rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="30" height="30" rx="2"></rect>
                <g id="编组-11" transform="translate(1.000000, 3.000000)">
                    <rect id="矩形" stroke="url(#linearGradient-1)" stroke-width="0.5" fill="currentColor" x="0.25" y="0.25" width="27.5" height="19.5" rx="3"></rect>
                    <rect id="矩形" fill="#FFFFFF" transform="translate(8.421217, 9.315041) rotate(36.000000) translate(-8.421217, -9.315041) " x="7.42121747" y="4.81504115" width="2" height="9" rx="1"></rect>
                    <rect id="矩形" fill="#FFFFFF" transform="translate(19.293893, 8.095492) rotate(36.000000) translate(-19.293893, -8.095492) " x="18.2938926" y="3.0954915" width="2" height="10" rx="1"></rect>
                    <rect id="矩形" fill="#FFFFFF" transform="translate(13.669689, 8.902136) rotate(128.000000) translate(-13.669689, -8.902136) " x="12.6696886" y="3.90213598" width="2" height="10" rx="1"></rect>
                    <path d="M16.0680916,14.9807473 L21.433887,21.7585941 C22.1194965,22.6246272 21.9732343,23.8824821 21.1072012,24.5680916 C20.7538759,24.8478076 20.3164391,25 19.8657954,25 L9.13420464,25 C8.02963514,25 7.13420464,24.1045695 7.13420464,23 C7.13420464,22.5493562 7.28639708,22.1119195 7.566113,21.7585941 L12.9319084,14.9807473 C13.6175179,14.1147142 14.8753728,13.968452 15.7414059,14.6540616 C15.8625552,14.7499715 15.9721817,14.859598 16.0680916,14.9807473 Z" id="三角形" fill="currentColor" opacity="0.486025856"></path>
                </g>
            </g>
        </g>
    </g>
</svg>