文章/答案/技术大牛

发布

社区首页 >问答首页 >SVG矢量图像不在HTML元素上显示

问SVG矢量图像不在HTML元素上显示
EN

Stack Overflow用户

提问于 2020-10-15 08:22:17

回答 2查看 447关注 0票数 0

我正在尝试创建一个图标按钮，所有的工作，除了从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;
}

html

css

electron

回答 2

Stack Overflow用户

发布于 2020-10-15 09:35:55

你必须给它一个宽度，高度和位置。

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

<button class="close"></button>

票数 0

Stack Overflow用户

发布于 2020-11-07 12:12:45

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64363178

复制

相似问题

问SVG矢量图像不在HTML元素上显示
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG矢量图像不在HTML元素上显示EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG矢量图像不在HTML元素上显示
EN