html - SVG 颜色只能在 firefox 中正确显示

Question

所以我正在为我的网站重新设计进行跨浏览器检查，我注意到只有在 Firefox 中，我的 SVG 颜色才显示它们从 Adob​​e XD 导出时的外观。在其他任何地方(包括移动设备)，它们都非常饱和。关于我造成这种情况的任何想法？您可以在以下位置查看我的网站:

https://tester.desertsunstudio.com

这里是一些要求的截图:

Chrome

火狐

投资组合图片的SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 716 456.561">
  <g transform="translate(-1084 -2280)">
    <path d="M496.622,248.169H485.936a51.572,51.572,0,0,0,25-44.185h0a51.655,51.655,0,0,0-51.655-51.655H390.108a51.571,51.571,0,0,0,25-44.185h0a51.654,51.654,0,0,0-51.655-51.655H76.845A51.654,51.654,0,0,0,25.19,108.143h0a51.571,51.571,0,0,0,25,44.185H12.441a51.655,51.655,0,0,0-51.655,51.655h0a51.655,51.655,0,0,0,51.655,51.655H23.127a51.572,51.572,0,0,0-25,44.185h0A51.656,51.656,0,0,0,49.782,351.48H256.419c-6.014,8.6-9.346,18.042-9.346,27.949,0,40.034,54.248,72.488,121.167,72.488s121.167-32.454,121.167-72.488c0-9.907-3.332-19.348-9.346-27.949h16.561a51.655,51.655,0,0,0,51.655-51.656h0A51.655,51.655,0,0,0,496.622,248.169Z" transform="translate(1123.214 2223.512)" fill="#f7941d"/>
    <rect width="152.042" height="51.655" rx="25.828" transform="translate(1568.414 2280)" fill="#643282"/>
    <rect width="152.042" height="51.655" rx="25.828" transform="translate(1121.341 2615.107)" fill="#4f1c6c"/>
    <circle cx="24.845" cy="24.845" r="24.845" transform="translate(1121.341 2686.87)" fill="#4f1c6c"/>
    <circle cx="24.845" cy="24.845" r="24.845" transform="translate(1750.309 2280.982)" fill="#643282"/>
    <path d="M4.69,274.694H541.734a51.618,51.618,0,0,0-45.112-26.525H485.936a51.572,51.572,0,0,0,25-44.185h0a51.655,51.655,0,0,0-51.655-51.655H390.108a51.571,51.571,0,0,0,25-44.185h0a51.654,51.654,0,0,0-51.655-51.655H76.845A51.654,51.654,0,0,0,25.19,108.143h0a51.571,51.571,0,0,0,25,44.185H12.441a51.655,51.655,0,0,0-51.655,51.655h0a51.655,51.655,0,0,0,51.655,51.655H23.127A52.028,52.028,0,0,0,4.69,274.694Z" transform="translate(1123.214 2223.512)" fill="#643282"/>
    <path d="M496.622,248.169H485.936a51.572,51.572,0,0,0,25-44.185h0a51.576,51.576,0,0,0-25.249-44.336l-2.548,30.9-4.6,9.849-9.848,3.283V185.347l-10.506,11.144v63.657l-156.736-8.74L283.534,211.56l6.566-32.173V149.84h-7.222l-5.244,28.89h-5.926V146.557L264.493,135.4l-13.233.656v-5.909l-13.687-9.192v56.467L228.38,180.7V141.961l-9.849-.657v19.041l-5.252,13.132-9.849,9.193-8.536,13.821-23.638-4.629-11.072,18.669-10.016-2.276-16.337-42.664H123.325l-3.283-23.63-10.5-1.314-15.1,13.789-2.627,17.071-9.192-.656V133.425h-3.94v-9.849l-16.414-5.909V103.878l-23.638-1.313,1.662,41.982a52.074,52.074,0,0,0,9.9,7.781h-9.6l7.223,22.462-5.253,2.627L31.4,196.491l-15.759,7.846V152.328h-3.2a51.655,51.655,0,0,0-51.655,51.655h0a51.655,51.655,0,0,0,51.655,51.655H23.127A52.028,52.028,0,0,0,4.69,274.694H541.734A51.618,51.618,0,0,0,496.622,248.169Z" transform="translate(1123.214 2223.512)" fill="#20376d"/>
    <circle cx="24.845" cy="24.845" r="24.845" transform="translate(1267.908 2302.845)" fill="#a36d00"/>
    <path d="M12.441,255.639H23.127a51.572,51.572,0,0,0-25,44.185h0a51.655,51.655,0,0,0,51.655,51.655H256.419c-6.014,8.6-9.346,18.042-9.346,27.95,0,40.034,54.248,72.488,121.167,72.488s121.167-32.454,121.167-72.488c0-9.908-3.332-19.348-9.346-27.95h16.561a51.654,51.654,0,0,0,51.655-51.655h0a51.655,51.655,0,0,0-51.655-51.655H485.936a52.11,52.11,0,0,0,14.224-12.686c-26.076-15.543-57.425-38.993-84.014-38.993-74.2,0-108.163,44.02-155.956,44.02s-69.174-32.7-144.636-36.473C62.9,201.4,22.9,228.416-4.861,252.606A51.458,51.458,0,0,0,12.441,255.639Z" transform="translate(1123.214 2223.512)" fill="#390a54"/>
    <path d="M338.168,265.45c-47.793,0-100.617,53.038-130.8,53.038s-45.277-32.7-104.389-32.7c-35.848,0-72.594,24.041-95.987,42.973a51.6,51.6,0,0,0,42.791,22.718H256.419c-6.014,8.6-9.346,18.042-9.346,27.95,0,40.034,54.248,72.488,121.167,72.488s121.167-32.454,121.167-72.488c0-9.908-3.332-19.348-9.346-27.95h16.561a51.654,51.654,0,0,0,51.655-51.655h0a51.793,51.793,0,0,0-.837-9.023C528.951,302.673,500.816,317.23,474,317.23,428.723,317.23,385.961,265.45,338.168,265.45Z" transform="translate(1123.214 2223.512)" fill="#4f1c6c"/>
    <path d="M381.8,395.676v27.666L403.3,408.859V379.227H381.8Z" transform="translate(1132.214 2210.512)" fill="#312100"/>
    <path d="M381.8,365.833V393.5L403.3,379.227v-23.3H381.8Z" transform="translate(1132.214 2210.512)" fill="#5a3900"/>
    <path d="M318.327,317.036v52.5L382.2,423.09v-52.5" transform="translate(1132.214 2210.512)" fill="#5a3900"/>
    <path d="M318.327,317.036,382.2,370.59,403.3,355.925l-62.274-52.5Z" transform="translate(1132.214 2210.512)" fill="#a7780f"/>
    <path d="M318.327,339.945v29.591L382.2,423.09V393.5" transform="translate(1132.214 2210.512)" fill="#312100"/>
    <path d="M330.117,346.571v7.854l9.555,8.011v-7.854" transform="translate(1132.214 2210.512)" fill="#c29844"/>
    <path d="M357.069,369.281v7.854l9.555,8.011v-7.854" transform="translate(1132.214 2210.512)" fill="#c29844"/>
    <path d="M347.15,327.124l1.492-9.992a5.834,5.834,0,0,1,9.61-3.531l17.565,15.354a5.815,5.815,0,0,1,1.923,5.235l-1.726,11.633a3.021,3.021,0,0,1-5.014,1.8l-2.4-2.176,0-.006,1.644-11.085-15.14-14.2-1.156,7.741a2.741,2.741,0,0,1-4.716,1.463l-2.071-2.224Z" transform="translate(1132.214 2210.512)" fill="#332100"/>
    <path d="M294.88,388.464l.757-12.528,7.292-4.153,3.477-4.161,10.456-2.763,10.381,7.538,4.085,8.724,2.323,8.793-6.488,5.273-20.029.208Z" transform="translate(1132.214 2210.512)" fill="#7e5708"/>
    <path d="M327.792,394.676l5.86-4.763-2.323-8.793-2.937-6.273-4.6,4.7Z" transform="translate(1132.214 2210.512)" fill="#a27823"/>
    <path d="M327.244,372.4l-10.381-7.538-10.456,2.763-3.477,4.161-.582.331,4.825,3.217,5.335,7.2,10.091,1.147,8.15-3.8Z" transform="translate(1132.214 2210.512)" fill="#c29844"/>
    <path d="M313.305,405.786l2.638-3.449H320l3.348,3.043-.406,5.681-6.188-2.029Z" transform="translate(1132.214 2210.512)" fill="#7e5708"/>
    <path d="M293.156,397.467l-2.333,4.768,4.87,4.971,3.246-1.623-2.739-4.261Z" transform="translate(1132.214 2210.512)" fill="#7e5708"/>
    <path d="M300.1,354.061l2.942,1.369,1.371,3.348,3.218-1.826-1.951-3.878Z" transform="translate(1132.214 2210.512)" fill="#7e5708"/>
    <path d="M369.572,427.184l8.05,4.616,14.126,1.619,12.949-5.15-1.471-3.99-5.886-1.013-3.973-7.357-4.562-2.691L376.446,417.3l-4.12,4.2Z" transform="translate(1132.214 2210.512)" fill="#7e5708"/>
    <path d="M403.227,424.278l-5.886-1.013-3.973-7.358-4.562-2.691-1.019.337.725,4.708-3.973,1.838-.441,4.178,4.414,2.813-1.03,2.06-1.552,3.6,5.819.667,12.949-5.15Z" transform="translate(1132.214 2210.512)" fill="#c29844"/>
    <path d="M406.938,417.485l6.954-1.512-4.334-3.427-3.225,2.469Z" transform="translate(1132.214 2210.512)" fill="#7e5708"/>
    <path d="M376.169,438.486,372.54,440.6l-3.931-3.528,5.846-1.613Z" transform="translate(1132.214 2210.512)" fill="#7e5708"/>
  </g>
</svg>

Answer 1

我同意@APAD1。 “投资组合”图像中的紫色天空具有 fill="#643282"。这就是 Firefox 屏幕截图的内容。但在 Chrome 屏幕截图中，天空颜色是 #6e1783。因此，似乎发生了一些与颜色管理相关的事情，并导致 Chrome 修改了您的颜色。

我不是普通的 Mac 用户，但这个问题似乎很相关:

CSS colors on OS X displaying incorrectly in Safari and Chrome but correctly in Firefox (potentially 'solved')

尝试进入显示设置并将“显示配置文件”更改为 sRGB。