css - 为背景图像填充颜色的 SVG 图标

Question

在带有 SVG 图标的 css 中使用背景图像和颜色给了我这个Second Result，而这是我需要的这个First 结果。我不知道在下面的图标代码中改变什么来实现这个结果
SVG 代码

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60.731px" height="60.731px" viewBox="0 0 60.731 60.731" style="enable-background:new 0 0 60.731 60.731;" xml:space="preserve">
    <g>
        <path d="M2.804,57.284c1.739-0.933,3.466-1.896,5.248-2.742c1.729-0.827,3.516-1.535,5.284-2.283
        c1.663-0.697,3.345-1.359,4.997-2.078c0.282-0.123,0.569-0.426,0.687-0.714c0.368-0.921,0.682-1.879,0.974-2.833
        c0.221-0.721,0.364-1.435,1.293-1.626c0.233-0.048,0.521-0.449,0.556-0.724c0.189-1.387,0.332-2.782,0.428-4.184
        c0.023-0.296-0.131-0.68-0.334-0.907c-1.224-1.369-1.897-2.947-2.18-4.763c-0.143-0.91-0.649-1.752-0.914-2.648
        c-0.348-1.204-0.638-2.418-0.914-3.642c-0.1-0.439-0.042-0.915-0.114-1.364c-0.107-0.656-0.087-1.164,0.702-1.416
        c0.218-0.07,0.4-0.591,0.407-0.911c0.04-1.948,0.014-3.898,0.025-5.847c0.01-1.195-0.002-2.396,0.084-3.59
        c0.168-2.286,1.509-3.898,3.191-5.283c2.455-2.026,5.396-2.969,8.418-3.687c1.585-0.372,3.202-0.6,4.817-0.857
        c0.429-0.07,0.876-0.012,1.316-0.012c0.07,0.113,0.144,0.223,0.219,0.334c-0.34,0.243-0.714,0.448-1.006,0.738
        c-0.657,0.657-0.593,1.119,0.112,1.711c1.455,1.235,2.915,2.468,4.331,3.746c1.246,1.12,1.731,2.589,1.733,4.238
        c0.003,2.838,0.005,5.675,0.003,8.516c-0.003,0.582-0.044,1.154,0.678,1.412c0.152,0.054,0.314,0.373,0.301,0.556
        c-0.123,1.453-0.278,2.904-0.434,4.354c-0.005,0.055-0.019,0.122-0.05,0.162c-1.305,1.904-1.474,4.242-2.404,6.288
        c-0.039,0.078-0.055,0.169-0.114,0.233c-1.729,2.039-1.19,4.488-1.223,6.829c-0.005,0.237,0.164,0.611,0.355,0.688
        c0.71,0.312,0.881,0.92,1.077,1.561c0.308,1.011,0.613,2.025,1.045,2.983c0.157,0.356,0.634,0.655,1.028,0.804
        c5.322,2.043,10.591,4.208,15.671,6.811c1.016,0.525,1.892,1.164,2.63,1.926V1.528c-20.251,0-40.493,0-60.731,0v57.675
        C0.818,58.443,1.777,57.834,2.804,57.284z"/>
    </g>
</svg>

标签： csssvg

Answer 1

我会重新渲染您的 svg 以使头部变黑且背景透明。

请参见下面的示例。

你可以用 css 做一些诡计来使你当前的版本工作，但我发现改变你的 svg 会更好。

.yellow-bg {
  background-color: #EAC435;
  overflow: hidden;
  text-align: center;
  width: 220px;
  margin: auto;
  border-radius: 5px;
}
.yellow-bg  svg {
  margin: -26px 0 -40px;
  width: 200px;
  height: auto;
}

<div class="yellow-bg"><svg width="61" height="55" viewBox="0 0 61 55" xmlns="http://www.w3.org/2000/svg">
<path d="M3.8636 52.5073C3.5158 52.6953 3.16805 52.8834 2.81982 53.0702C1.7887 53.6224 0.825743 54.2337 0 54.9963V55H61V54.7885C60.2725 54.0533 59.4145 53.434 58.4244 52.9224C53.3158 50.3047 48.0171 48.1275 42.6651 46.073C42.2689 45.9231 41.7892 45.6225 41.6313 45.2644C41.2083 44.3265 40.9064 43.3352 40.605 42.3452L40.5667 42.2199C40.375 41.5919 40.1948 41.0013 39.4973 40.6948C39.3053 40.6174 39.1353 40.2413 39.1404 40.003C39.147 39.5289 39.1304 39.0505 39.1137 38.5719C39.0477 36.6737 38.9816 34.7731 40.3702 33.1355C40.4092 33.0933 40.4295 33.0394 40.4499 32.9852C40.4606 32.9567 40.4714 32.9282 40.4849 32.9012C40.8602 32.0756 41.1122 31.2027 41.3643 30.3297C41.7405 29.027 42.1167 27.7242 42.9024 26.5777C42.9336 26.5375 42.9477 26.4701 42.9527 26.4148C43.1096 24.9567 43.2655 23.4975 43.3892 22.0363C43.4022 21.8523 43.2393 21.5315 43.0865 21.4772C42.395 21.2301 42.3994 20.6966 42.404 20.1408C42.4043 20.113 42.4045 20.0851 42.4046 20.0572C42.4066 17.2002 42.4046 14.3472 42.4016 11.4932C42.3996 9.83492 41.9119 8.35764 40.6589 7.23133C39.3352 6.0367 37.9734 4.88117 36.6129 3.72678C36.5097 3.63926 36.4066 3.55175 36.3034 3.46422C35.5945 2.86889 35.5301 2.40428 36.1908 1.74358C36.3955 1.54027 36.6403 1.37851 36.8857 1.21638C36.9922 1.14594 37.0989 1.07543 37.2025 1.00142C37.1271 0.889796 37.0526 0.779176 36.9823 0.665539C36.8442 0.665539 36.7055 0.659861 36.5668 0.654186C36.261 0.641673 35.9557 0.629175 35.6588 0.677606C35.3918 0.720094 35.1248 0.761793 34.8579 0.803476C33.501 1.01535 32.1466 1.22684 30.8147 1.53944C27.7757 2.26148 24.8181 3.2098 22.3493 5.24721C20.6578 6.64002 19.3092 8.2611 19.1403 10.56C19.0697 11.5404 19.0647 12.5255 19.0598 13.5082C19.0587 13.729 19.0576 13.9497 19.0558 14.1702C19.0518 14.8743 19.0527 15.5785 19.0535 16.2827C19.055 17.5388 19.0564 18.7949 19.0307 20.0502C19.0236 20.372 18.8406 20.8959 18.6214 20.9663C17.8279 21.2197 17.8078 21.7306 17.9154 22.3903C17.9481 22.594 17.9541 22.8033 17.9602 23.0121C17.9675 23.2662 17.9749 23.5197 18.0301 23.762C18.3076 24.9929 18.5992 26.2137 18.9492 27.4245C19.0564 27.787 19.2029 28.1408 19.349 28.4938C19.5661 29.018 19.7824 29.5405 19.8684 30.0874C20.1529 31.9136 20.8297 33.5005 22.0606 34.8772C22.2648 35.1055 22.4197 35.4917 22.3965 35.7894C22.3 37.1993 22.1562 38.6021 21.9661 39.9969C21.9309 40.2735 21.6413 40.6767 21.407 40.725C20.5424 40.9028 20.3548 41.531 20.1555 42.1983C20.1394 42.2521 20.1233 42.3061 20.1067 42.3602C19.813 43.3195 19.4973 44.2829 19.1272 45.2091C19.0085 45.4988 18.7199 45.8035 18.4363 45.9272C17.4092 46.3742 16.3706 46.7993 15.3321 47.2244C14.6908 47.4868 14.0496 47.7493 13.4112 48.0169C12.9653 48.2055 12.5183 48.3916 12.0712 48.5777C10.7356 49.1337 9.40012 49.6896 8.0974 50.3127C6.66219 50.9941 5.26246 51.7509 3.8636 52.5073Z" fill="#000000"/>
</svg></div>