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>

的style.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一样。

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

1 个答案: