2017-09-07 11 views
0

svgスプライトがガルプ自体を除いてどこにも見えないという問題がありました。ここでホスティング上の何====>https://i.stack.imgur.com/N1Ko8.png
なぜサーバー上でsvgスプライトが見えないのですか? gulpのすべてがうまくいます

そして今含ま一口、すべてが正常に動作===>https://i.stack.imgur.com/MRQ0j.png

スクリプトは

体に
;(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)); 

答えて

0

をスプライトを追加するために持っているのですデバッグステートメントを使用して、サーバー側で正しいデータを取得していることを確認しましたか?

その後、このjsスクリプトでconsole.logを使用して、コンソールにデータを記録します(またはchrome javascriptデバッガとブレークポイントを使用します)。

サーバーから適切なデータを確実に受け取ることができます。サーバーが500エラーを受け取った場合、JSは通常は実行を停止します(時には続行しますが、応答は無効です)。

このページでは、クロムデバッガの使用方法について説明します。

Get Started with Debugging JavaScript in Chrome DevTools

+0

私はエラーがjsのコードであるとは思わないが、私はスプライトとその注入の側から何かがあると思います。 –

+0

すべての拠点をカバーしようとしています。エラーがどこにあるかを見つける唯一の方法は、後方に働いており、サーバーとクライアント上でデータが正常であることを確認することです。 –

関連する問題