Question

我想在我的网页上使用SVG图标。因此，我创建了一个包含所有图标定义的SVG文件（defs.svg）：

<svg style="position:absolute;width:0;height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="img_test" viewBox="0 0 1024 1024">
	<path class="path1" d="M860.184 52.761c93.399 0 163.812 67.858 163.812 163.782v364.038c0 83.333-65.224 163.97-163.812 163.97h-277.814c-25.609 0-61.008 14.799-79.019 33.044l-180.619 182.944c-18.018 18.222-36.535 12.602-41.359-12.553l-30.289-157.833c-4.827-25.156-26.314-45.597-48.017-45.597h-39.264c-100.936 0-163.804-73.116-163.804-163.97v-364.042c0-98.634 67.858-163.782 163.804-163.782h696.38z"></path>
</symbol>
...
</defs>
</svg>

但是，当我使用以下HTML代码可视化图标

时

<svg style="display:inline-block;width:48px;height:48px;fill:#000;">
  <use xlink:href="http://www.example.com/defs.svg#img_test"></use>
</svg>

它不会显示在 Firefox 和 Safari 中，但它会在 Chrome 中显示。谁能告诉我这里我做错了什么？

PS：使用给定的SVG定义内联适用于所有上述浏览器，但这种方法不适合我，因为我希望浏览器缓存SVG。

Answer 1

问题是我的服务器没有为svg文件资源提供正确的 MIME类型。手动将响应标头中的MIME类型设置为＆＃34; image / svg + xml ＆＃34;它也适用于Firefox和Safari。

Firefox中不显示外部SVG图标

1 个答案: