为什么 svg 精灵在服务器上不可见。在 gulp 一切都很好

Question

有这样一个问题，除了 gulp 本身，svg sprite'y 在任何地方都不可见。这是主机上的内容 ====> https://i.stack.imgur.com/N1Ko8.png

现在包含 gulp，一切正常 ===>https://i.stack.imgur.com/MRQ0j.png

用于将精灵添加到 body

的脚本

;( function( window, document ) {
  'use strict';

   var file     = 'img/symbols.svg',
    revision = 1;

    if( !document.createElementNS || !document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect )
    return true;

    var isLocalStorage = 'localStorage' in window && window[ 'localStorage' ] !== null,
    request,
    data,
    insertIT = function()
    {
        document.body.insertAdjacentHTML( 'afterbegin', data );
    },
    insert = function()
    {
        if( document.body ) insertIT();
        else document.addEventListener( 'DOMContentLoaded', insertIT );
    };

    if( isLocalStorage && localStorage.getItem( 'inlineSVGrev' ) == revision )
    {
    data = localStorage.getItem( 'inlineSVGdata' );
    if( data )
    {
        insert();
        return true;
    }
}

try
{
    request = new XMLHttpRequest();
    request.open( 'GET', file, true );
    request.onload = function()
    {
        if( request.status >= 200 && request.status < 400 )
        {
            data = request.responseText;
            insert();
            if( isLocalStorage )
            {
                localStorage.setItem( 'inlineSVGdata',  data );
                localStorage.setItem( 'inlineSVGrev',   revision );
            }
        }
    }
    request.send();
}
catch( e ){}

}( window, document ) );

Answer 1

您是否使用调试语句来确保在服务器端获得正确的数据？

然后，您可以在此 js 脚本中使用 console.log 将数据记录到控制台（或使用 chrome javascript 调试器和断点）。

我会确保您从服务器接收到正确的数据。如果服务器收到 500 错误，JS 通常会停止执行（有时它会继续但响应无效）。

此页面介绍了如何使用 chrome 调试器：

Get Started with Debugging JavaScript in Chrome DevTools

为什么 svg 精灵在服务器上不可见。在 gulp 一切都很好

Why svg sprites are not visible on the server. In gulp everything is fine

html

javascript

svg

svg-sprite