SVG 矢量图像未显示在 HTML 元素上答案

【问题标题】：SVG vector image not showing on HTML elementSVG 矢量图像未显示在 HTML 元素上
【发布时间】：2021-01-29 10:36:56
【问题描述】：

我正在尝试创建一个图标按钮，一切正常，除了 SVG 图像。当我使用 CSS 将 SVG 文件添加为 background-image 时，它似乎没有出现。我什至尝试使用::before 伪元素（或类，不确定它是哪一个）。我尝试过的所有方法都是 StackOverflow 上的人建议的，但我似乎不明白为什么我自己的情况不同。当我尝试复制我在 StackOverflow 上的答案中找到的代码时，它可以工作，但我的似乎不起作用。请问，我做错了什么。我是 CSS、HTML 和 Javascript 的新手。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled - NoteBook</title>
    <link rel="stylesheet" href="../Styles/titlebar.css">
    <link rel="stylesheet" href="../Styles/editorStyle.css">
</head>
<script src="../UI/renderer.js"></script>

<body>
    <div id="container">
        <div id="titlebar-container">
            <div id="titlebar">
                <div id="drag-region">
                    <p id="window-title">Notebook</p>
                </div>
                <div id="window-icon-container">
                    <button class="icon" id="minimize">
                    </button>
                    <button class="icon" id="maximize"></button>
                    <button class="icon" id="close">
                    </button>
                </div>
            </div>
            <!-- <div id="menubar"></div> -->
        </div>
        <div id="split-container">
            <div id="note-list" class="split">
                <ul>
                    <li>Note #1</li>
                    <li>Note #2</li>
                    <li>Note #3</li>
                    <li>Note #4</li>
                    <li>Note #5</li>
                    <li>Note #6</li>
                    <li>Note #7</li>
                    <li>Note #8</li>
                    <li>Note #9</li>
                </ul>
            </div>
            <textarea id="text" class="split"></textarea>
        </div>
    </div>
</body>

</html>

CSS

* {
    --transparent: rgb(0, 0, 0, 0);
    --medium-opacity: rgba(0, 0, 0, 0.2);
    margin: 0;
    outline: none;
}

#menubar {
    background-color: rgb(76, 25, 124);
}

#titlebar-container {
    top: 0px;
    height: 30px;
    text-align: center;
    position: fixed;
    line-height: 30px;
    
}

#titlebar {
    height: 30px;
    padding: 2px 2px 0px 2px;
    background-color: rgb(76, 25, 124);
    user-select: none;
}

#drag-region {
    width: 100%;
    height: 100%;
    -webkit-app-region: drag;
}

#window-title {
    font: menu;
    font-size: 12px;
    color:  rgb(226, 214, 236);
    height: 10px;
    background-color: var(--transparent);
    margin: 5px;
    z-index: 5000;
}

#window-icon-container {
    top: 0px;
    right: 0px;
    text-align: center;
    position: absolute;
    z-index: 3000;
    -webkit-app-region: no-drag;
    height: 32px;
    width: 138px;
    margin-left: auto;
    background-color: var(--transparent);
}

.icon {
    width: 46px;
    height: 100%;
    float: left;
    outline: none;
    border: none;
    background-color: var(--transparent);
    /* cursor: pointer; */
}

#close:before {
    content: url(/Icons/close.svg);
}

#minimize:hover {
    background-color: var(--medium-opacity);
}

#maximize:hover {
    background-color: var(--medium-opacity);
}

#close:hover {
    background-color: rgb(173, 30, 25)
}

*::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px;
}

【问题讨论】：

和element { background-image: url(/images/image.svg); } 不起作用？
是的，背景图像不起作用
您的脚本应该在<head> 或<body> 内，而不是在两者之间。

标签： html css electron

【解决方案1】：

你必须给它一个宽度高度并定位它。

.close::before {
  content:url('https://oxoinnovation.com/images/facebook-f.svg');
  width:50px;height:50px;
  position:absolute;
}

&lt;button class="close"&gt;&lt;/button&gt;

【讨论】：

【解决方案2】：

我解决了这个问题。我的 Javascript 技能不太好，所以我不知道我的问题出在 SVG 图像的文件路径上，文件路径错误。所以我更改了文件路径，这次我使用了background-image 属性。即使我更改了文件路径，当我编辑 SVG 图像并将其保存到以前的位置时，SVG 图像又消失了，所以我删除了 SVG 图像并将 SVG 的副本移动到正确的位置，它出现了一次更多

【讨论】：