我偶然发现了一个非常奇怪的问题。当我将 .svg 文件上传到我的网络托管服务器时,.svg 文件在浏览器中呈现为文本而不是图像。
当我开发该站点时,我创建了一个本地 Web 服务器,那里的一切看起来都很好。
因此,例如当我输入时:
http://localhost:8080/wordpress/wp-content/themes/SelenaStheme/intro/images/animation1.svg
我看到一张照片。
但是当我输入时:
http://www.selenas.se/wp-content/themes/SelenaStheme/intro/images/animation1.svg
我看到以下内容:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
height="150px" viewBox="0 0 200 150" enable-background="new 0 0 200 150" xml:space="preserve">
<g id="Layer_2" display="none">
<rect display="inline" fill="#D3D3D3" width="200" height="150"/>
</g>
<g id="Layer_1">
<g>
<path fill="#BF4756" d="M61.241,66.484c0.058-0.52-0.096-1.099-0.349-1.751C61.025,65.329,61.142,65.913,61.241,66.484z"/>
<path fill="#BF4756" d="M42.401,88.682c-3.276-11.089-6.221-23.403,5.585-28.073c2.426-0.96,5.841-1.078,7.912,0.355
c-0.264-0.767-0.504-1.521-0.724-2.265c-1.966-0.397-4.368-0.153-7.021,0.897c-12.94,5.118-15.824,17.941-9.698,34.145
c3.832,10.166,3.639,24.764-11.266,30.661c-8.845,3.498-16.252,1.535-18.141-3.243c-0.675-1.707-0.995-3.474-0.281-5.019
c0.49,0.28,1.416,0.229,1.989,0.002c1.638-0.648,2.271-2.161,1.731-3.526c-0.593-1.501-2.336-2.075-4.793-1.103
c-2.866,1.134-3.805,4.268-2.563,7.407c3.023,7.644,11.899,10.448,21.808,6.528c12.203-4.827,22.026-14.711,16.268-34.06
C43.057,90.884,42.382,88.68,42.401,88.682z"/>
</g>
<g>
<path fill="#FFFFFF" d="M42.405,88.679c2.056,0.146,4.033-0.253,7.139-1.481c10.61-4.197,10.363-15.735,7.067-24.41
c-5.267-13.828-3.783-24.393,5.429-28.037c4.081-1.614,7.813-0.529,9.059,2.62c0.968,2.448-0.565,4.538-2.955,5.484
c0.344-1.687,0.337-2.898-0.401-4.763c-1.107-2.799-3.503-3.401-5.776-2.502c-9.095,3.597-5.124,15.511-1.996,25.465
c5.153,16.435-1.548,24.21-10.235,27.646c-2.766,1.094-5.075,1.495-6.981,1.156"/>
</g>
</g>
</svg>
当我在我的公共保管箱文件夹中托管文件时,我会看到预期的图片。
是否可以在我的网络托管服务提供商处禁用渲染 .svg 文件?怎么可能?我对 Web 开发还很陌生,但是这个 bug 花了我 5 个小时才明白这是我的问题(我以为我写了错误的路径,因为 .svg 文件没有出现在我的动画中)。知道如何从这里继续前进吗?
谢谢!