javascript - Webpack 加载带有白色边框的 SVG

Question

我有一个 SVG，我正在通过文件加载器加载它，指向我的 .scss 文件中的路径，但出于某种奇怪的原因，它有一个白色边框。如果我设置一个 css 边界，它就会设置在白色之外。

我检查了文件以确保它没有白色背景。这已经证实了。

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

我的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,
        },
    },
};

这里有什么想法吗？

另一个例子:

这是 1 个 SVG 的代码。我项目中的每个 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

您正在使用 <img>标签而不为其提供实际来源，而是依赖于背景图像。浏览器为您的图像呈现一个占位符，因为您没有给它一个实际的资源来呈现，这就是奇怪的边框的来源。

设法在这里挑出来http://jsbin.com/difopib/

您应该设置一个 src该图像的属性或使用不同的标签。如果，出于某种原因你死定了 <img> + 背景 svg，您可以将源设置为 1px 透明 gif，参见 https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/