我正在尝试使用 <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 ..."
.
我做错了什么?
最佳答案
我的猜测是您的服务器发送的 mime 类型不正确,浏览器认为它是纯文本或 XML。如果是这样,正确的 mime 类型是 image/svg+xml
,就像在您的对象标签中一样。
关于javascript - 为什么 SVG sprite XML 文件在服务器上显示为文本字符串,而不是在本地显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31690655/