SVG не отображается в Firefox с помощью Webpack и угловых 2

Я использую Webpack загрузить мою SVGs используя следующего загрузчикаSVG не отображается в Firefox с помощью Webpack и угловых 2

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

Это встраивает весь мой SVGs и производит следующее в моем HTML

<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

Вы устанавливаете '' для углового маршрутизатора? –

Да, у меня он установлен на этот '' –

Ok '/' должен отлично работать как для Angular, так и для SVG. Если у вас есть значение, отличное от '/', это, вероятно, вызовет проблемы с SVG. Не знаю, что вызывает вашу проблему. Вы проверяли https://github.com/angular/angular/issues по известным проблемам? –

Ответ, который дал Robert Longson было правильным.

Я удалил тег, и в моем приложении.module я добавил {provide: APP_BASE_HREF, useValue: '/'}. Как указано here

источник

2017-02-22 10:41:58

SVG не отображается в Firefox с помощью Webpack и угловых 2

ответ

Смежные вопросы