我想在我的网页上使用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被浏览器缓存。
问题是我的服务器没有为svg文件资源提供正确的MIME类型。在响应头中将MIME类型手动设置为“ image / svg + xml ”后，它也可以在Firefox和Safari中使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句