Svg图标在Chrome和Mozilla浏览器中显示不同

Question

所以我有一个在Chrome和Mozilla中显示不同的图标。似乎图标在Mozilla中有一些黑色边框。如果有人知道这是怎么回事，那对我有很大的帮助。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="logo" width="460pt" height="399pt" viewBox="0 0 460 399" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="#dc4a38ff">
<path opacity="1.00" d=" M 67.82 29.82 C 92.40 13.12 122.67 7.03 152.00 7.06 C 197.34 6.93 242.68 7.02 288.02 7.01 C 267.94 17.90 247.94 28.96 227.84 39.79 C 223.45 40.31 219.00 39.85 214.58 40.01 C 224.87 51.61 233.18 65.39 236.18 80.76 C 239.99 100.11 237.50 121.16 227.17 138.17 C 219.94 150.22 209.41 159.85 198.33 168.30 C 193.22 172.09 188.27 176.28 184.61 181.54 C 181.85 185.43 180.91 190.74 182.86 195.18 C 184.55 198.95 187.89 201.56 190.99 204.12 C 208.68 217.82 227.75 230.59 241.25 248.77 C 257.62 270.75 259.02 301.77 247.14 326.11 C 236.28 348.97 215.67 365.91 192.88 376.10 C 162.26 389.68 127.94 392.92 94.83 390.14 C 69.35 387.81 43.20 380.45 23.51 363.43 C 10.06 351.99 1.02 335.29 0.00 317.55 L 0.00 312.37 C 1.07 288.32 15.59 266.47 35.24 253.24 C 62.19 234.86 95.30 229.06 127.20 226.38 C 120.43 215.65 117.48 202.41 120.41 189.94 C 104.73 190.46 88.80 188.01 74.42 181.55 C 57.34 173.85 42.77 160.44 34.20 143.73 C 25.82 127.72 22.98 108.88 26.49 91.13 C 31.24 66.20 46.89 43.93 67.82 29.82 M 115.51 39.71 C 107.59 41.45 99.90 45.28 94.52 51.45 C 87.28 59.42 84.92 70.53 84.74 81.01 C 84.60 98.32 89.02 115.61 96.97 130.96 C 103.34 143.00 112.86 154.28 126.03 158.98 C 140.07 164.13 156.38 160.08 167.49 150.42 C 175.12 143.55 177.98 132.92 178.23 122.97 C 178.61 104.75 173.90 86.56 165.56 70.42 C 160.04 60.19 152.78 50.37 142.61 44.37 C 134.57 39.53 124.71 37.71 115.51 39.71 M 143.36 254.54 C 124.59 255.63 105.35 257.61 88.04 265.46 C 79.65 269.28 71.65 274.61 66.30 282.25 C 59.39 292.10 58.07 305.22 61.59 316.58 C 65.35 328.46 74.79 337.75 85.57 343.55 C 104.27 353.59 126.08 356.09 147.02 355.29 C 163.65 354.36 181.31 350.47 193.89 338.84 C 203.42 330.20 207.50 316.55 205.18 304.01 C 203.55 294.05 196.78 285.98 189.48 279.46 C 179.13 270.32 167.73 262.44 156.30 254.75 C 152.02 254.14 147.66 254.42 143.36 254.54 Z" />
<path opacity="1.00" d=" M 336.00 7.00 C 347.33 7.00 358.67 7.00 370.00 7.00 C 370.00 33.00 370.00 59.00 370.00 85.00 C 396.00 85.00 422.00 85.00 448.00 85.00 C 448.00 96.33 448.00 107.67 448.00 119.00 C 422.00 119.00 396.00 119.00 370.00 119.00 C 370.00 146.00 370.00 173.00 370.00 200.00 C 358.67 200.00 347.33 200.00 336.00 200.00 C 336.00 173.00 336.00 146.00 336.00 119.00 C 309.33 119.00 282.67 119.00 256.00 119.00 C 256.00 107.67 256.00 96.33 256.00 85.00 C 282.67 85.00 309.33 85.00 336.00 85.00 C 336.00 59.00 336.00 33.00 336.00 7.00 Z" />
</g>
</svg>

.logo {
    background: url(google.svg);
    background-repeat: no-repeat;
    fill: #1da0f2;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    padding: 0px;
}

Answer 1

在我看来，Chrome版本中还有一个微弱的黑色轮廓。这让我怀疑你是直接在另一个上面绘制了两个徽标实例。一个黑色和一个蓝色。仔细检查并非如此。

SVG本身没有任何问题。