如果SVG看起来没有不透明度，它看起来有不透明度，怎么解决呢？

Question

我可以在Chrome中看到一个错误，看来svg有不透明度：

这是在野生动物园：

所以我不知道如何解决这个问题，我尝试使用不透明度，但是也检查了SVG中的填充不透明度。

这是嵌入了svg代码的笔（尝试使用Chrome和Safari）： http://codepen.io/jepser/pen/reNOJZ

这是Illustrator导出的示例，但我也尝试使用Sketch：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.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="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="24px"
     viewBox="0 0 140 24" enable-background="new 0 0 140 24" xml:space="preserve">
<title>Social media</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" sketch:type="MSPage">
    <g id="Footer-Public-Website" transform="translate(-955.000000, -364.000000)" sketch:type="MSArtboardGroup">
        <g id="footer-link-col4" transform="translate(952.000000, 179.000000)" sketch:type="MSLayerGroup">
            <g id="Social-media" transform="translate(3.000000, 185.000000)" sketch:type="MSBitmapLayer">

                    <image overflow="visible" enable-background="new    " width="48" height="48" id="Bitmap" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABKZJREFU
aAXtWm1sFEUYnq+9bYuFllqrZ9TWVE1MjBg/fiGCYDQQlIINrSZnUctdaU+shZLww79NWo2RNnIW
otVC1RhPExQSScBoiCE2NWCIUdFUFH+ghkIt9m7nwx0uW5d1b2+ue3e2yW3Sm5nnnXnf5/242d3r
QGBekUjkeqBX9mJCl0OgBSU2Vy8BjN8YJZ+BxPnuWCx2FkryUF90AhNcNVdJu/FilP0pEhfuJKnI
w3lFXjokA05BZS+SZePm4XzAJHc012veK5CSO/KaMB9kRQf+7ywVM1DMgM8IFEvIZwB9Lye+NQDA
KaXHiSAYaOC+TPo4N6Y4g0cFED8KLKqwwKsxxoszrUsn9+UAZXz45zN/7DwU3/urNBDZsq2DlAb6
3YwxzpOC8Z7YwQ97wOnTCWvOw42Ni+uCdcOEkNUWlk0LO7p2imwWyLmcGX8bjLfu6X95v3Nt29Yd
X5sPWkvsuIz6pb+mVgztee0rO271G0Obb6yuqPweaVi3MNU26y+xwcHZqUTifjfy0igT/B27ccMw
hGGwp9KRl3Pff3vwjIDiqH2daj+rEjJL5pfJixeWj7yx+6d0BpIG/TKgaTNiDeHPB3b1fTADpOmY
ZTCRRuQJK2eAM/b7xYnzK73IS0tjx06NmVFnltVpA8af2dL5SOOm6O0W5tYSiK5zwzNh6g4I8dHI
0Os/PNESvqU12vWkqfjfMNusnDz56RTC6DsLwhj0lJaWHqquWHAi1Np+q4Xb29ra2hIOWMYdzL7G
6is7IIR4tm1r97vlCxd+qwf0fe2R7iZLyX9aDk5ZmKbBMtlHCJGSkrKVFm5vlzU0LEVYK7Vjqn1l
BzSTCSZko9liqZwHUCidEbN+xtxkQrBzbngZ1R5zw1UwZQecysyUr2hoCLm+SyeTyWPO+ZTTc4c/
jn/ixJesW1cBAWpx4qrjWTsgM1FzU3Ctm6Gh3a8cN3fPS3YZp/zF8fHxaTsm+3ffXN+GA+gqJ646
nrUD0gARMF3qkwjxmX3dSIixwf6X9jpJrW1uvjrAcJcTz2bsywGO6ENyB3EzSJkRl7gh+HQiOdli
dme2VonLK3hNXZ/f36N8OYCQtmDVmvUPpuhc+Xn4QHyEGvQLnkxuHBoc+OZKKQChzs5VGgEtTjzb
cVZ3YjfliOBHTfygUybrPbard5kTl+OmpqeD5UzfB3yFL6XZtwozivKLDFPqlD61yprq96CGapRm
Z5jk2wH541IkGr03gx1LDCMd3W+Zdb/UAvy2vh2QBATSH1chEn5u+6tEJ80qc1Xn5MQBCIl8rPDS
BdujOwbMe0dUlZjqPC+jqjoAweiGzdFtra4L6uv18Avbh2EAt7vKfYI5cUBygAT2bWrrfMDOR/7v
IbJmwxENavLpNS/XrF4p0zGR772MszcFFUcYBrfpCD/v54U9nR077vs+YFeGEQqYf2FAQNiO57Of
sxLKJ0kv3UUHvKJTCFkxA4WIspeNYga8olMI2fzPgDx7UIhI5cOG5I4uH5zIh/YC6JTckTz1IQ9O
FMBeTk1c5mxyx6Ojo5P33HXHfo5KroWIVkGAy3NqKcfKUsdt0AGQmNggj9v8AxmvdNB0EWB4AAAA
AElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 116 0)">
                </image>

                    <image overflow="visible" enable-background="new    " width="48" height="48" id="Bitmap_2_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAAcNJREFU
aAXtWr1KxEAQ3r/jbESOsxB9BhHBB7DyBXyJgHaCoA9gcaCVQgSLaxR7myt9gDTWNtecnXjhtAi3
m5i5a8KSHDEbJ1nYVJnJzs433zfZ+2EoSS/P83ZItzfgQh5S0tkGX1uvhMw/lBSvJPo6931/QgE8
7W68ccH7bQWdh0tJ9ZlE4Z5YMk+tAg8FAeGS9AYM2iavQht8gJ21vedXEQnY2aoFNjxzBTStklPA
KWDIgPUtJAwJqBQeKzVVUl6E3z+j56E/ztvk9OwyyfPrPvQC5lKOZ2F49DS8f9fBVLHRWyhl/qQu
8FAwagHwDfLh7mZUhemiGNQCCE0mKZC4CEwVP2oBKfLafyyhvsQdLjaLWC576ujxqAroyeuwXQF1
sGiyB63ae2WT3l5f0bJrs+vK4nItlGWtiXunQBOsZ3Nar8C/n0JZtuC+6FQqe+ro+1mvgCtAlxTb
dgpgM67ncwrojGDbTgFsxvV86J/EOgBT27WQKYOm8U4BUwZN4+1XAGYPTFloKh6ws8XgRFMIDPMC
dgZTH/C3t+Fe6OELzCl2HgTB7GB/9zFma1uUyT4lfB0dzR8SLsdt2AuJpscwbvMLNKCBir53MSAA
AAAASUVORK5CYII=" transform="matrix(0.5 0 0 0.5 29 0)">
                </image>

                    <image overflow="visible" enable-background="new    " width="48" height="48" id="Bitmap_3_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABHBJREFU
aAXtWl9sFEUYn3+7e9cc1vaaomCURBIJhCAUCaQxnErQFx+MOdIHrKUJ7fEntVegaRoeiUmr/KkK
Xs+GVBJJpW8aEzE+EBLhgUYgEPBBEmNi06iIbWPgbmd2nGktXc7bvZm7W22T2+R638z3m9/3/b6Z
m9vbDgTiSiQSy4FV048JjUFgLJN9C/XiwB5nlFwAmXvdqVTqFyiTh1b1dUxwdKEmnS8vRtldnplc
R2YrDxdV8lKQLDgFNf1ILpt8ChdDn8wdLfQ171dImTvyAywGX0XA/z1LlRmozECJFSAljtcaThm7
wTn7GnAwAZhZh0LONgzQC1okOeCiBFDKzxIHUmCC5hy+vE3Hsf+izOlMf3B0KAfQu3vfwR3IQCcN
TOoooxe5w68ijJoxwjU52LxNuP9AL8/r8egU9yDXPh7oWy/dbV0H+kxodXtAZ7qdrDOVvT+1eWjo
1G0v3KvxeO0zNUvr0+mPfpCYppbEirpo7R1hFtxkCgJygzLmnJnrSx872mNTMDzXzvdOAevxS16O
OT86+sdc8rI9/dvUpFhuTNqFLm0BU7/f/dxFygcH3m21H2R7bNv+V0A7w79Pf/heyoVXMpc/92QP
wdhQAWsJEEX5cWTk9HgOMR88+X7fg6y9lVJ26REft8+JttYSbd3b9ZJYlgcf4fFpaH2IOeVXvLg+
TZ34Tvgam5PJbSFm7EQcb6cOvemF9+o3TWNA+JQLqyWAYednr8Bz/WeOH/9W2PIlLy3+pqbWZWLp
rJ0dqvZXWamkQxTcU6N9iKIPLQXDWhJW2jrdVFoCIKZaFXUHUrGxYdWr4NwYLQEckmfdg8ttIwSC
FYAgaih30m4+jPFqd1vF1poBCNHqhoaGKhXiYjAIwld0x2kJQAiRjY2xnbpBVPCxWCzCAdykgnVj
tATIgQYxk+INuknKYa9ZtekN1W9fdzxtAQDCVe0dhzrcJOWwHQt2FcOjL0BEQRj3t+zeW9J9vDvZ
txKdL4sHVc+7+1TtogRghEyrKnIu3tz2tGogH5wRCVnHfPy+rqIESEaDkBXR6ONX3k50NvpGKOBs
f+fQYbF9risA83QXLcB27GnCyE8GDhf93SDFi19evZ7ZKTi0bw04db74dXyifXR0eEKB3xOyq23f
BjNsfSW3Zk+QgkN7BjIse7bU5Fv2JF8MhSPfGAhXK+ToC9EWECLmHrBypeXL6u0kbR3dRyJV4Qvl
+n+E/vRhtLX9tfgl276///Tgicveuc57ntqyJfz65tgOwJ1kKR/YecZ5S/upxPxQACillynFIzQ7
eXH4k1O3hC/7jx/G4y1Lq+trN4iEt+s8JnHzq9glCXAHED/qOeZ4mhPOxM4i17b28nTzqdr6S8iD
2TAMeX/0mIc7sO7/pEqBZS+IKwKCrK4Kd2UGVKoUJGbxz4A8exBkhYLklrmjmYMTQUYJkFvmjuSp
D3lwIsA4gVDP5Cxyx2NjY9Mb16/9zEGhJyCiUQjwkkAilol09rgN+hJk/nxTHrf5Gw17R+AeyJMq
AAAAAElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 0 0)">
                </image>

                    <image overflow="visible" enable-background="new    " width="48" height="48" id="Bitmap_4_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAA8pJREFU
aAXtWl9IFEEcnp1ZzzIsLSzLHiR6sCDKCEIKuh6KyqIoKqiHCiKM1B6CInsuy5BCkwykEOoxlKyM
/kA91EEanVf0B4J8yJREMi6Vu5vZaX8nJ8f2m1v3/sgd3MCyM9/vm2++38zc3rKMRsxSVVVVQnIL
G5jO3RrJWQJYuhZJQj8F11+SwO+zra2tAxqY13Ln9TGdLUhX05gvwcWIDPxZrU/OvJZR5iEhmHBO
ChsobBssw0zAwDtN9z0fayLBO41FyISYni4mbzRe0mJ5qT5TJ7F4xq9ANgFsWWcSy67ATM42NlZ2
BbBZmUlMUz1fZ9JEImNlt1Ais5eMvtkVsM6iIUIToVComQf9679/6Z8PF9QBg5iVn2g7qS9zhhDD
Y4HA9vabTe8sxt6a7bdHTta2z8ml3ZSxIks87mZSt1Bwgh9GzE+ZgxhwpoAkVJKWAOf8cdutxmd2
noADXDvedOPKLaR6P68+fb6D6Noe6wBC8NtWTNUGrq7rO6xxaYQ6Wq5d3WvFoa36v3K8AoLKcmyA
oZHBVxiOYSquQdhajB8Lc5yAJmQxJtjV0+PHcAz74PH8xXBDI4swPBbmOAHJyDgmeHTz1hUYjmHu
LTvKMJxK6fgx6zwBKQewwV2z83ZjOIapuFKhjWlEMOcJUNkX6Rx9Zxqr2b7/mO3zHTjAje4bqUuF
diSO3R0noI2z+5gQfCkrLSnqqKw8VIjFAYMYcFSfMVXaKj3AlY9RVaeHfa+e7FznHtRd2mIrhzF9
Q2lZyccTy881B8f9T7zDP/uBs6ZoSakrL38bNWgtY//3Aw4PykHQhrqT4jiBHx7PBFm/qY4Q7Q42
EHwtc+mk3jW3oH7j3AKMgmNM1oW18agSdbyFQKn1+uV2wbnj2VK5EEJ0g6YqHguPKwFTUPp6vxww
B0Z/0LEGtMZAw9fz+SBoWmPTacebAHn9+oHf0//VbRp4NJ2BMA70BQ3QwuLTwRz/BqJFvZ2do15C
dh0/db5Gd4kLOtUXRsdVdW7wXzzILra1XGk2OXHNfEQ77hWICICBtpb6pjcvvMvMeq0IGc+FYQSj
4uEqYBADDnChj1lPyDwIJ7QCIBApPt/TMfOCGW1eWlEx272yvMSVmxN+bwoGQkMvP70fiOcpE9FX
3ZOWQPQAYPSux/PNxOBKaUnGFkqpQTvxbAJ2M5TqeMavQPbbaKq3iJ0+hbMHdqR0jYN3Gj44ka4O
bXyBdwqnPuDghA037cJhz6Z31tvb619XvuqeQWcVa5Qv0AjLTzu3UYYmj9vQLhIY3QfHbf4BU+Bv
zcPEpP8AAAAASUVORK5CYII=" transform="matrix(0.5 0 0 0.5 58 0)">
                </image>

                    <image overflow="visible" enable-background="new    " width="48" height="48" id="Bitmap_5_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAA5hJREFU
aAXtWk1IVFEUvn9vRsiIGKHQRbUNQsJoPdtWJdFS24QajdqPPxC1DdLCMiMFNyWtgixauJ2toQtX
0soClQqHilzovPvTPW/miUzzc9574szAPEfevHvP+b7vnHvfuW8elxJ79PX1tZH48TEuZJISpxXa
avUwxN1UUqTJ7q+R6enpDQriafzYChc8Uauii+lSUmXM7p92kcs8rSvxEBAkXJLjYwymTbEI66EN
tLNan/PlEgnaWTmDeuhrBFDtUWqMQGMEImagMYUiJjCyuwiL4Lqu4oRJwrUkkisjjKKGSKqpVoZq
HpNGascAvmAuVVlBOTXM+6NEUEk5ERZCMaGIFo7j8DBaAgcglZ778W3zzvz8m0wYwlI+nZ3diROn
WicEZ12lbIq1BwrAldnxmedPRooBRW3LJ6S7d3DouyNiw1g89E2slFqw4kexwGHtgAO4sP7oALYy
mVsW1JvTWPCQdibPhXJHBSCVct/Nza6hEA/ACLiAEwOFCoBRncWA5W2gmqBwy2FiOVE3sSEMHUDq
3n0JwrRLPq6t/0wtvJ9dLye0VF+e80ipfr8dlSlDDGo4fVA4M4dcPt3WstrTP3TbXgau8VhOVACc
GS+r+wVivvMYa47FYhOpu6OL128OdGB8fBssJyoALe2KG+WgvKPJiS/2Dgw/SyaTzRgoLCcqAMLs
Q0LEAx4V7P/g2faLqz2pkSsV4ZCcuAAqsgUz0GYnckJ8RlQVItpQ3yHsGR7+CKUvvqx8fphOp7cr
4gAnIr2oAJjQKLuSooxa3nF3e1+/mlwuaVPQkeOsXLxQwpSmKLsCDURl9bam6sHM5PiU7VOF/eWu
gVMc1AhQQp1yZEX7pPnwdWOrP+xCxgyNFcUtaERllhKNAgPsqaePABNuUg3XoQ+qbdIqTyHEIFkl
hqEDsIJhqkQTDwBITlQAgnPnWteNM6GzGdARuIAT44YKAIBaEomX9hS5nCJE0TwXwjTAYy/n/JL9
ufcYhRrBCDiACwtB7eNvoFWx1n7UBw7Az8x/r1W4kXZ+KdRrFVteqLJrSzVeq/gB5N/j2DrH42R/
jbItudrsEGfvDnOI8GzsiuIDeBXSGnifyuXSdys871EUdtTLdSOAao9UYwQaIxAxAwz2HkTEqJo7
aGfexomqSYhGDNoZ7PqAjRPRoA7f29NstfOlpaW/F86fe6tZ00nKZIISfvTw5eAZc9tt2Cey+/sq
bLf5B4Z7U99vg8qhAAAAAElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 87 0)">
                </image>
            </g>
        </g>
    </g>
</g>
</svg>

Answer 1

我重新压缩了你的PNG图像，问题就消失了。例如：

<svg width="200" height="120" viewBox="0 0 200 120" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="200" height="30" fill="#08f"/>
<rect x="0" y="30" width="200" height="30" fill="#0cf"/>
<rect x="0" y="60" width="200" height="30" fill="#fa0"/>
<rect x="0" y="90" width="200" height="30" fill="#f50"/>
<!-- Original image: -->
<image x="30" y="36" width="48" height="48" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABKZJREFU
aAXtWm1sFEUYnq+9bYuFllqrZ9TWVE1MjBg/fiGCYDQQlIINrSZnUctdaU+shZLww79NWo2RNnIW
otVC1RhPExQSScBoiCE2NWCIUdFUFH+ghkIt9m7nwx0uW5d1b2+ue3e2yW3Sm5nnnXnf5/242d3r
QGBekUjkeqBX9mJCl0OgBSU2Vy8BjN8YJZ+BxPnuWCx2FkryUF90AhNcNVdJu/FilP0pEhfuJKnI
w3lFXjokA05BZS+SZePm4XzAJHc012veK5CSO/KaMB9kRQf+7ywVM1DMgM8IFEvIZwB9Lye+NQDA
KaXHiSAYaOC+TPo4N6Y4g0cFED8KLKqwwKsxxoszrUsn9+UAZXz45zN/7DwU3/urNBDZsq2DlAb6
3YwxzpOC8Z7YwQ97wOnTCWvOw42Ni+uCdcOEkNUWlk0LO7p2imwWyLmcGX8bjLfu6X95v3Nt29Yd
X5sPWkvsuIz6pb+mVgztee0rO271G0Obb6yuqPweaVi3MNU26y+xwcHZqUTifjfy0igT/B27ccMw
hGGwp9KRl3Pff3vwjIDiqH2daj+rEjJL5pfJixeWj7yx+6d0BpIG/TKgaTNiDeHPB3b1fTADpOmY
ZTCRRuQJK2eAM/b7xYnzK73IS0tjx06NmVFnltVpA8af2dL5SOOm6O0W5tYSiK5zwzNh6g4I8dHI
0Os/PNESvqU12vWkqfjfMNusnDz56RTC6DsLwhj0lJaWHqquWHAi1Np+q4Xb29ra2hIOWMYdzL7G
6is7IIR4tm1r97vlCxd+qwf0fe2R7iZLyX9aDk5ZmKbBMtlHCJGSkrKVFm5vlzU0LEVYK7Vjqn1l
BzSTCSZko9liqZwHUCidEbN+xtxkQrBzbngZ1R5zw1UwZQecysyUr2hoCLm+SyeTyWPO+ZTTc4c/
jn/ixJesW1cBAWpx4qrjWTsgM1FzU3Ctm6Gh3a8cN3fPS3YZp/zF8fHxaTsm+3ffXN+GA+gqJ646
nrUD0gARMF3qkwjxmX3dSIixwf6X9jpJrW1uvjrAcJcTz2bsywGO6ENyB3EzSJkRl7gh+HQiOdli
dme2VonLK3hNXZ/f36N8OYCQtmDVmvUPpuhc+Xn4QHyEGvQLnkxuHBoc+OZKKQChzs5VGgEtTjzb
cVZ3YjfliOBHTfygUybrPbard5kTl+OmpqeD5UzfB3yFL6XZtwozivKLDFPqlD61yprq96CGapRm
Z5jk2wH541IkGr03gx1LDCMd3W+Zdb/UAvy2vh2QBATSH1chEn5u+6tEJ80qc1Xn5MQBCIl8rPDS
BdujOwbMe0dUlZjqPC+jqjoAweiGzdFtra4L6uv18Avbh2EAt7vKfYI5cUBygAT2bWrrfMDOR/7v
IbJmwxENavLpNS/XrF4p0zGR772MszcFFUcYBrfpCD/v54U9nR077vs+YFeGEQqYf2FAQNiO57Of
sxLKJ0kv3UUHvKJTCFkxA4WIspeNYga8olMI2fzPgDx7UIhI5cOG5I4uH5zIh/YC6JTckTz1IQ9O
FMBeTk1c5mxyx6Ojo5P33HXHfo5KroWIVkGAy3NqKcfKUsdt0AGQmNggj9v8AxmvdNB0EWB4AAAA
AElFTkSuQmCC" />
<!-- Recompressed image: -->
<image x="122" y="36" width="48" height="48" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAC7ElEQVR4nOyay2sTQRzHt0pV8CLq
SUWCVA+CRRC9iRfxBUqrRNqKMU27u7Pvnc2+EhA8exL1IF4E33jxoOLBiygKHsST/4AoqOjFt/ic
X9qYtM6kTXc208AOfC/tb9vPZ/Y3u7PJShIZCKHVyKlcMcrBK7Nc/TOfA4zACsxSHV5zoneiwdoN
MNckwEY0zFwD7FI3tA0rwC6JhkiaTEB0MgHRyQREJxMQHR4Cv5ATPjbt6pPZ1Os4+ITs8JZqB6cU
7F/S3Oi9MAHkxhf3HhxfI00OpPsmq1bD8XcCfkLq61ssNY3d+fxyMgF3Oiqgu8EX2SofkSiD7BKf
0Wa9KOtbafUw8gVlrW5H3zoioOLqy2OavYUFo9hBOKXeDn7LpneIVd8QD++mLkBa5sVISVvXCqSo
4e1TjnPj+zPBwyBtdC1VAd2N3o4U1fUzgfT371pKZv1n/bhxo2KP6XhPftTa2Oo4EE1VgMzQefhH
IDHZ/70sGA1HzxstVPk8sQ7iHwXZ2ECrz+VyS2BdpSoAvUz69Hp9dg0UHmUKONEN2t9QrECj1Rcw
3jkX+LbXQHM0O77HElCcKKYdw1rMyArPdFwAzsTgYGEFDei/hQwtiMM30CrTazcPDCzTrPhjxwVq
UG5cZJyERfXeb7SPr9IKxzy/koQh2VbCqdxktRHZItz+d7bMylPyo4XTa/YPD69M+pFOIgG4w9La
AoZseaUavBd/LSrmJlqN6lQvJJrAxGegDNd5bx8NDsTI3ucBWbgHaL9PcuXhKqA4wTlWG7HG0FBp
lWHHr+eFQO3DJUnqaYO/l/T9Qx7wXAQgyLK2zRK+B5nhVV7w3ARUxz85G3py7zjNE57fGSC7VMK3
oNXMG1Z0ljc8NwEI60YFT2CqF1xOA56rgIqDD6Ma3tHMPvHFSfQoLXiuAhB47oXLqmz4h0u2fzzp
A3vHBUQkExCdTEB0MgHRyQREp/u/6O76Vw26/mWPxq6xO1+3+QsAAP//AwCs+d8+UC5pPgAAAABJ
RU5ErkJggg==" />
</svg>

左侧的图标使用您的原始数据，右侧的图标是通过将PNG图像加载到GraphicConverter并重新保存而不更改任何内容来获得的。我在背景中添加了一些彩色条，表明alpha通道没有任何问题。您的原始图标更轻。

这是图像文件的开头：

0000000: 8950 4e47 0d0a 1a0a 0000 000d 4948 4452  .PNG........IHDR
0000010: 0000 0030 0000 0030 0806 0000 0057 02f9  ...0...0.....W..
0000020: 8700 0000 0467 414d 4100 035b 5e5c ff26  .....gAMA..[^\.&
0000030: 7800 0004 a649 4441 5468 05ed 5a6d 6c14  x....IDATh..Zml.
0000040: 4518 9eaf bd6d 8b85 965a ab67 d4d6 544d  E....m...Z.g..TM
0000050: 4c8c 183f 7e21 8260 3410 9482 0dad 2667  L..?~!.`4.....&g
0000060: 51cb 5d69 4fac 8592 f0c3 bf4d 5a8d 9136  Q.]iO......MZ..6
0000070: 7216 a2d5 42d5 184f 1314 1249 c068 8821  r...B..O...I.h.!
0000080: 3635 6088 51d1 5414 7fa0 8642 2df6 6ee7  65`.Q.T....B-.n.
0000090: c31d 2e5b 9775 6f6f ae7b 77b6 c96d d29b  ...[.uoo.{w..m..

与重新保存的文件不同，您的文件包含gAMA块，其值为0x00035b5e（表示伽玛值为2.2）。基于此伽玛值，Chrome将原始RGB颜色（108,115,102）更改为（173,178,182），这更加明亮。作为参考，数字如下：

gamma = 0x00035b5e / 100000 = 219998 / 100000 = 2.19998
r_display = 255 * pow(108/255, 1/gamma) = 173
g_display = 255 * pow(115/255, 1/gamma) = 178
b_display = 255 * pow(122/255, 1/gamma) = 182

要解决您的问题，请导出不带伽玛信息的PNG图像（强烈推荐），或尝试将伽玛值设置为1.0。

（注意：我确信您已经知道，通过将这些图标存储为SVG矢量数据而不是PNG文件，可以节省大量带宽。）

Answer 2

仅针对寻找相同问题的人。

我在这里遇到了同样的问题并解决了它更改SVG代码（fill）。

出于某种原因，我在资源管理器和Inkscape中看到的图像很好（全黑，没有不透明度），但代码是

fill="rgba(24, 90, 50, 0.28)"

这是某种绿色和透明的，所以我将其更改为：

 fill="rgba(0, 0, 0, 1)"

它运行得很好（也许你必须清除你的缓存文件）。