Webpack wird geladen SVG mit weißem Rand

Question

Ich habe ein SVG, das ich über den Datei-Loader geladen habe, auf den Pfad in meiner .scss-Datei zeigend und aus irgendeinem Grund hat es einen weißen Rand. Wenn ich einen CSS-Boarder einstelle, wird er außerhalb des Weiß gesetzt.

Ich habe die Datei überprüft, um sicherzustellen, dass sie keinen weißen Hintergrund hat. Das ist bestätigt.

menubar.js

import React, { Component } from 'react'; 

class MenuBar extends Component { 
    render() { 
     return (
      <div className="menu-bar"> 
       <img className="logo" /> 

       <div className="nav"> 
        <a className="selected" href="#">Sky</a> 
        <a href="#">HQ</a> 
        <a href="#">Settings</a> 
       </div> 
      </div> 
     ); 
    } 
} 

export default MenuBar; 

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; 
} 

Mein 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, 
     }, 
    }, 
}; 

Alle hier Ideen?

Ein weiteres Beispiel:

Hier ist der Code von 1 der SVGs. Jedes SVG in meinem Projekt zeigt den Rand

<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

Sie verwenden ein <img> Tag ohne eine tatsächliche Quelle für sie bereitstellt, sondern auf einem Hintergrundbild zu verlassen. Der Browser rendert einen Platzhalter für Ihr Bild, da Sie ihm keine tatsächliche Ressource zum Rendern gegeben haben, da kommt der seltsame Rand her.

Managed hier http://jsbin.com/difopib/

einzelne aus sollten Sie entweder auf diesem Bild ein src Attribut oder einen anderen Tag verwenden. Wenn Sie aus irgendeinem Grund auf + Hintergrund Svg gesetzt sind, könnten Sie die Quelle zu einem 1px transparent GIF setzen, siehe https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

Answer 2

Ihr img-Tag hat keine Quelle. Fügen Sie eine Quelle hinzu (vielleicht ein transparentes PNG) und der Rahmen wird verschwinden.
Sie können einstellen, auch eine leere Quelle:

<img src=""/>