javascript - 为什么 SVG sprite XML 文件在服务器上显示为文本字符串，而不是在本地显示？

Question

我正在尝试使用 <object> 实现自定义 svg 图标标签，并且在本地一切正常。然而，当我推送到服务器时，我得到了 xml 文件的文本字符串来代替我的 svg 图像。

index.html

<object type="image/svg+xml" data="sprite.svg#iconA" class="icon icon-iconA"></object>

sprite.svg

<?xml version="1.0"?>
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <style><![CDATA[
      .sprite { display: none; }
      .sprite:target { display: inline; }
      ]]></style>
  </defs>

   <g class="sprite" id="iconA">
   <path fill="#000000" d="..."></path>
  </g>

  <g class="sprite" id="iconB">
    <path fill="#000000" d="..."></path>
  </g>

</svg>

样式.css

.icon {
  display: inline-block;
  text-indent: 100%;
  fill: currentColor;
}

.icon-iconA {
  width: 6.5em;
  height: 6.5em;
}

此外，如果我在浏览器中本地导航到 sprite.svg 文件的绝对路径，我可以看到文件内容为 svg 图像，但如果我在服务器上执行相同操作，我会得到一个小文本框带有输出 XML 文件的滚动条 <?xml version="1.0" encoding="utf-8"?><svg ..." .

我做错了什么？

Answer 1

我的猜测是您的服务器发送的 mime 类型不正确，浏览器认为它是纯文本或 XML。如果是这样，正确的 mime 类型是 image/svg+xml，就像在您的对象标签中一样。