SVG不使用的WebPack和角度2

我使用的WebPack使用以下裝載機SVG不使用的WebPack和角度2

{ 
    test: /\.svg$/, 
    loader: 'svg-sprite-loader?' + JSON.stringify({ 
     name: 'icon-[1]', 
     prefixize: true, 
     egExp: './assets/svg/.*/(.*)\\.svg' 
    }) 
}

此內聯我所有svgs併產生在我的HTML下面加載我svgs在Firefox表示

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0"> 
    <defs> 
     <symbol viewBox="0 0 128 128" id="icon-add-new_128"> 
      <path d="M68 36h-8v24H36v8h24v24h8V68h24v-8H68z"></path> 
      <path d="M64 8C33.076 8 8 33.074 8 64s25.076 56 56 56c30.926 0 56-25.074 56-56S94.926 8 64 8zm0 108c-28.673 0-52-23.327-52-52s23.327-52 52-52 52 23.327 52 52-23.327 52-52 52z"></path> 
     </symbol> 
    </defs> 
</svg>

在我的角度2個app.module.ts我有

let actionBasedIcons = require.context('../assets/svg/action-based', false, /.*\.svg$/); 
actionBasedIcons.keys().forEach(actionBasedIcons);

，在我的HTML我有

<svg class="ibm-icon" aria-hidden="true"> 
    <use xlink:href="#icon-add-new_128"></use> 
</svg>

這工作正常，在Chrome和Safari，但不能在Firefox

來源

2017-02-22 Caroline Church

您是否正在爲Angular路由器設置'？ –

是的，我已經把它設置爲這個''' –

Ok'/'對於Angular和SVG都適用。如果你有一個不同於'/'的值，它可能會導致SVG問題。不知道是什麼導致你的問題。您是否檢查過https://github.com/angular/angular/issues是否存在已知問題？ –

是Robert Longson給出的答案是正確的。

我刪除了標籤，並在我的app.module中添加了{provide: APP_BASE_HREF, useValue: '/'}。如上所述here

來源

2017-02-22 10:41:58

SVG不使用的WebPack和角度2

回答

相關問題