项目在服务器上时无法加载图形

Question

我创建了一个可以在我的本地网络服务器上完美运行的网站。 对于网站的背景，我创建了一个自己生成背景的脚本。因此，当您访问该网站时，该网站的外观将永远不会相同。

我的问题是，我的背景图像 SVG 没有加载到 Web 服务器上。我的 Inspector 工具显示“无法加载图形”。

我的 CSS 是这样的。

<?php
  if (!isset($_GET['bgAmount']) || intval($_GET['bgAmount' ]) == '') {
    $maxBackgroundAmount = 8;
  } else {
    $maxBackgroundAmount = intval($_GET['bgAmount' ]);
  }

  
  $maxBackgroundWidth = 1500 / $maxBackgroundAmount;
  if ($maxBackgroundWidth > 200) {
    $maxBackgroundWidth = 200;
  }
  $texturesAmount = 20;

  $backgroundUrl = '';
  $backgroundSize = '';
  $backgroundPosition = '';
  $backgroundRepeat = '';

  for ($i = 0; $i < $maxBackgroundAmount; $i++) {
    $randBackground = rand(1, $texturesAmount);
    $randSize = rand(50, $maxBackgroundWidth);
    $halfAmount = ceil($maxBackgroundAmount / 2);
    $restAmount = $maxBackgroundAmount - $halfAmount;

    if (($i + 1) <= $halfAmount) {
      $randPosX = (rand(0, 3500) / 100);
      $areaSize = 9500 / $halfAmount;
      $maxArea = round($areaSize * ($i + 1));
      $minArea = round($areaSize * $i);
      $randPosY = (rand($minArea, $maxArea) / 100);
    } else {
      $randPosX = (rand(6500, 10000) / 100);
      $areaSize = 9500 / $restAmount;
      $maxArea = round($areaSize * (($i - $halfAmount) +1));
      $minArea = round($areaSize * ($i - $halfAmount));
      $randPosY = (rand($minArea, $maxArea) / 100);
    }

    if ($i != 0) {
      $backgroundUrl .= ', ';
      $backgroundRepeat .= ', ';
      $backgroundSize .= ', ';
      $backgroundPosition .= ', ';
    }
    $backgroundUrl .= 'url(\'../background/'.$randBackground.'.svg.php?t='.time().$i.'\')';
    $backgroundRepeat .= 'no-repeat';
    $backgroundSize .= ($randSize / 10).'% auto';
    $backgroundPosition .= $randPosX.'% '.$randPosY.'%';
  }
?>

body {
  background-image:<?php echo $backgroundUrl; ?>;
  background-repeat:<?php echo $backgroundRepeat; ?>;
  background-position:<?php echo $backgroundPosition; ?>;
  background-size:<?php echo $backgroundSize; ?>;
}

我的 CSS 输出是这样的

  background-image:url('../background/18.svg.php?t=16379319920'), url('../background/2.svg.php?t=16379319921'), url('../background/17.svg.php?t=16379319922'), url('../background/6.svg.php?t=16379319923'), url('../background/4.svg.php?t=16379319924'), url('../background/20.svg.php?t=16379319925'), url('../background/17.svg.php?t=16379319926'), url('../background/1.svg.php?t=16379319927'), url('../background/4.svg.php?t=16379319928'), url('../background/11.svg.php?t=16379319929');
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:6.26% 13.98%, 5.24% 30.47%, 25.5% 43.19%, 19.42% 64.97%, 0.38% 78.55%, 86.25% 15.15%, 71.62% 24.47%, 97.57% 54.86%, 76.16% 68.4%, 67.54% 92.37%;
  background-size:8.2% auto, 12.4% auto, 9.1% auto, 9.7% auto, 14.4% auto, 11.7% auto, 12% auto, 9.6% auto, 5.7% auto, 8.3% auto;

SVG 的 PHP 脚本是这样的

<?php echo '<?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">

<?php
    header('Content-type: image/svg+xml');

    $rotation = rand(-45, 45);

    echo '
        <svg transform="rotate('.$rotation.')" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
    ';
?>

<g>
    <g>
        <path fill="#FFFFFF" d="M36.008,105.89c2.69,1.721,8.931,4.411,15.492,4.411c12.159,0,15.92-7.745,15.815-13.557
            c-0.109-9.789-8.93-13.984-18.075-13.984h-5.268v-7.1h5.268c6.886,0,15.601-3.548,15.601-11.833
            c0-5.593-3.553-10.543-12.264-10.543c-5.592,0-10.976,2.476-13.985,4.625l-2.473-6.883c3.657-2.69,10.756-5.379,18.286-5.379
            c13.77,0,20.011,8.177,20.011,16.674c0,7.209-4.307,13.34-12.913,16.458v0.22c8.606,1.721,15.602,8.172,15.602,17.966
            c0,11.187-8.716,20.975-25.495,20.975c-7.854,0-14.738-2.475-18.179-4.735L36.008,105.89z"/>
    </g>
    <g>
        <path fill="#FFFFFF" d="M32.889,218.884c0-8.821,5.27-15.062,13.876-18.718l-0.105-0.321c-7.748-3.657-11.08-9.684-11.08-15.709
            c0-11.077,9.359-18.61,21.623-18.61c13.555,0,20.331,8.502,20.331,17.213c0,5.916-2.904,12.263-11.51,16.354v0.319
            c8.715,3.444,14.094,9.574,14.094,18.074c0,12.155-10.437,20.332-23.777,20.332C41.71,237.818,32.889,229.106,32.889,218.884z
             M70.543,218.455c0-8.496-5.918-12.587-15.387-15.275c-8.172,2.364-12.588,7.747-12.588,14.412
            c-0.318,7.105,5.059,13.342,13.989,13.342C65.055,230.934,70.543,225.664,70.543,218.455z M44.509,183.49
            c0,6.996,5.27,10.758,13.337,12.913c6.027-2.045,10.652-6.352,10.652-12.698c0-5.593-3.334-11.399-11.835-11.399
            C48.811,172.306,44.509,177.47,44.509,183.49z"/>
    </g>
    <g>
        <rect x="27.717" y="138.283" fill="#FFFFFF" width="57.604" height="8.97"/>
    </g>
    <g>
        <path fill="#FFFFFF" d="M244.088,53.499c-1.936-0.104-4.41,0-7.1,0.43c-14.848,2.474-22.699,13.34-24.312,24.85h0.321
            c3.337-4.41,9.144-8.067,16.893-8.067c12.368,0,21.084,8.931,21.084,22.591c0,12.803-8.716,24.638-23.235,24.638
            c-14.957,0-24.746-11.62-24.746-29.801c0-13.77,4.95-24.632,11.835-31.517c5.807-5.703,13.555-9.254,22.376-10.328
            c2.799-0.434,5.163-0.538,6.885-0.538V53.499z M241.399,93.841c0-10.003-5.702-16.03-14.415-16.03
            c-5.703,0-10.974,3.552-13.555,8.606c-0.648,1.077-1.077,2.475-1.077,4.196c0.215,11.509,5.487,20.012,15.386,20.012
            C235.91,110.625,241.399,103.849,241.399,93.841z"/>
    </g>
    <g>
        <path fill="#FFFFFF" d="M233.437,236.636v-19.044h-32.49v-6.236l31.202-44.648h10.218v43.465h9.79v7.42h-9.79v19.044H233.437z
             M233.437,210.172V186.83c0-3.662,0.108-7.321,0.323-10.977h-0.323c-2.15,4.089-3.871,7.099-5.809,10.327l-17.102,23.778v0.213
            H233.437z"/>
    </g>
    <g>
        <rect x="198.144" y="138.283" fill="#FFFFFF" width="57.604" height="8.97"/>
    </g>
    <polygon fill="#FFFFFF" points="170.534,138.283 146.215,138.283 146.215,113.967 137.248,113.967 137.248,138.283 
        112.931,138.283 112.931,147.253 137.248,147.253 137.248,171.569 146.215,171.569 146.215,147.253 170.534,147.253     "/>
</g>
</svg>

我将时间戳附加到每个背景图像链接，因为每个 SVG 都会随机旋转。

您可以通过以下链接查看该网站。 http://trustec.de/testWebsite/

网络分析工具中每个 SVG 的响应为 200。 我不知道为什么这不起作用。

如果你能帮助我，非常感谢。

PS：我正在使用 Mac 电脑。我无法在 Windows 或 Linux 计算机上对其进行测试。在一项研究中，我发现了一个线程，其中有人在 MacOS 下遇到了 SVG 的问题。但在我看来这是不可能的，因为当我在本地托管网站时，一切都很好。

Answer 1

我查看了您引用的网站 - 我可以看到对 svg 的调用返回内容类型“text/html”，内容编码为“chunked”：

我怀疑 Web 服务器上的某些配置有误。我建议使用简单的“gzip”作为 image/svg+xml 内容类型的内容编码。这可能会解决问题 - 或不能 - 但我相当确定问题出在 Web 服务器配置上。