使用 webpack 和 Angular 2 未在 Firefox 中显示 SVG答案

【问题标题】：SVG not showing in firefox using webpack and angular 2使用 webpack 和 Angular 2 未在 Firefox 中显示 SVG
【发布时间】：2017-07-12 05:12:59
【问题描述】：

我正在使用 webpack 使用以下加载器加载我的 svgs

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

这内联了我所有的 svg 并在我的 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>

在我的 Angular 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 中则不行

【问题讨论】：

你在为 Angular 路由器设置 <base href="..."> 吗？
是的，我已将其设置为 <base href="/">
好的 / 应该适用于 Angular 和 SVG。如果您的值与 / 不同，则可能会导致 SVG 出现问题。不知道是什么导致了你的问题。您检查github.com/angular/angular/issues 是否有已知问题？
你对 svg 元素使用任何转换吗？
不，我没有在 svg 元素上使用任何转换

标签： angular svg webpack

【解决方案1】：

Robert Longson给出的答案是正确的。

我删除了标签并在我的 app.module 中添加了{provide: APP_BASE_HREF, useValue: '/'}。如前所述here

【讨论】：