Webpack読み込みSVG白枠付き

Question

ファイルローダー経由でロードしているSVGを持っています。私の.scssファイルのパスを指していて、何らかの奇妙な理由で白いボーダーがあります。私がCSSボーダーを設定すると、白の外に設定されます。

ファイルを調べて、白い背景がないことを確認しました。それが確認された。

menubar.js

​​

menubar.scss：

.menu-bar .logo { 
    position: relative; 
    background: url('../images/glimpse-menu-bar.svg') center center no-repeat; 
    top: 50%; 
    transform: translateY(-50%); 
    padding-left: 20px; 
    cursor: pointer; 
} 

マイwebpack.dev.config.js：ここ

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

// Config directories 
const SRC_DIR = path.resolve(__dirname, 'src'); 
const ASSETS_DIR = path.resolve(__dirname, 'assets'); 
const OUTPUT_DIR = path.resolve(__dirname, 'dist'); 

// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up 
const defaultInclude = [SRC_DIR]; 

module.exports = { 
    entry: ['babel-polyfill', SRC_DIR + '/index.js'], 

    output: { 
     path: OUTPUT_DIR, 
     publicPath: '/', 
     filename: 'bundle.js', 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader', 
      }, 
      { 
       test: /\.scss$/, 
       loader: 'style-loader!css-loader!sass-loader', 
      }, 
      { 
       test: /\.jsx?$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['react', 'es2015', 'stage-3'], 
       }, 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loader: "file-loader", 
      }, 
      { 
       test: /.(ttf|eot|otf)(\?v=[0-9].[0-9].[0-9])?$/, 
       loader: "file-loader", 
      },  
     ], 
    }, 
    target: 'electron-renderer', 
    plugins: [ 
     new HtmlWebpackPlugin(), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), 
     }), 
    ], 
    devtool: 'cheap-source-map', 
    devServer: { 
     contentBase: OUTPUT_DIR, 
     stats: { 
      colors: true, 
      chunks: false, 
      children: false, 
     }, 
    }, 
}; 

任意のアイデア？

もう一つの例：

ここSVGsの1のコードです。プロジェクトのすべてのSVGに国境が表示されます

<svg width="53" height="54" viewBox="0 0 53 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<title>&#224;&#213;&#172;</title> 
<desc>Created using Figma</desc> 
<g id="Canvas" transform="translate(-6960 -4611)"> 
<g id="Ellipse 2"> 
<mask id="mask0_outline_ins"> 
<use xlink:href="#path0_fill" fill="white" transform="translate(6960 4611)"/> 
</mask> 
<g mask="url(#mask0_outline_ins)"> 
<use xlink:href="#path1_stroke_2x" transform="translate(6960 4611)" fill="#FFFFFF"/> 
</g> 
</g> 
</g> 
<defs> 
<path id="path0_fill" d="M 53 27C 53 41.9117 41.1355 54 26.5 54C 11.8645 54 0 41.9117 0 27C 0 12.0883 11.8645 0 26.5 0C 41.1355 0 53 12.0883 53 27Z"/> 
<path id="path1_stroke_2x" d="M 50 27C 50 40.3079 39.4261 51 26.5 51L 26.5 57C 42.845 57 56 43.5154 56 27L 50 27ZM 26.5 51C 13.5739 51 3 40.3079 3 27L -3 27C -3 43.5154 10.155 57 26.5 57L 26.5 51ZM 3 27C 3 13.6921 13.5739 3 26.5 3L 26.5 -3C 10.155 -3 -3 10.4846 -3 27L 3 27ZM 26.5 3C 39.4261 3 50 13.6921 50 27L 56 27C 56 10.4846 42.845 -3 26.5 -3L 26.5 3Z"/> 
</defs> 
</svg> 

Answer 1

：
また、空のソースを設定することができます。ブラウザはレンダリングする実際のリソースを与えていないので、イメージのプレースホルダをレンダリングします。これは、奇妙な境界がどこから来るのかです。

はここhttp://jsbin.com/difopib/

あなたはその画像上src属性を設定するか、または別のタグを使用する必要がありますどちらかそれを選び出すことができました。 何らかの理由で<img> +バックグラウンドsvgに設定されている場合は、ソースを1px透明gifに設定することができます。https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

Answer 2

あなたのimgタグにはソースがありません。ソース（おそらく透明なPNG）を追加すると、枠線が消えます。あなたが代わりに背景画像に頼って、それのための実際のソースを提供することなく<img>タグを使用している

<img src=""/>