如何在 SVG 图像前渲染文本答案

【问题标题】：How do I render text infront of an SVG image如何在 SVG 图像前渲染文本
【发布时间】：2021-12-25 23:24:43
【问题描述】：

如何在 SVG 图像前渲染文本？我正在尝试这样做，它只是隐藏在后面。

我的 CSS 看起来像这样

.Default_View_Text___{
    position: relative;
    margin-top: 190px;
    margin-left: 30px;
    top:25.05%;
    z-index: -10px;
    font-family: 'Poppins';
    font-weight: bold;
    font-size: 17px;
    color: #1A73E8;
}

我需要解决这个问题。如何获取 SVG 前面的文本

编辑

HTML 如下所示：

import React from 'react';
import logo2 from './logo2.svg';
import clock from './clock.svg';
import msgbox from './msgBox.png'
import bellicon from './bell-icon.png'
import tab from './tab.svg';
import vis from './vis.svg';
import './HomeDashboard.css'

const DashBoard = () => {
    return (
        <div className="BBDashBoard__">
            <div className="DashBoardSideBar__">
            </div>
            <div className="TopBarNav___">
                <img src={logo2} className="betaLogo__" alt="logo" /><span className="NameSpecHolder__"> Welcome, <strong className="DisplayName__">John</strong> &nbsp;<button className="DispAminName__">Admin</button><img src={msgbox} className="MessageAreaBox__" /><img src={bellicon} className="BellIcon__" /></span>
            </div>
            <div>
                <h4 className="MainPageExTap__">Estimates</h4>
            </div>
            <div>
                <h4 className="MainPageExTap__2__">Recently added</h4>
            </div>
            <div>
                <h4 className="Default_View_Text___">Default View</h4>
            </div>
            <div>

            </div>
            <div>
                <div className="TableCustomersBleBg__">
                    <img src={tab} className="blueBg__"/>
                </div>
                <div className="TablesCustomerWhiteBg__">
                <img src={vis} className="whiteBg__"/>
                </div>
                <div>
                <table border="0" width="100%">
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </table>
                </div>
            </div>
        </div>
    );
}

export default DashBoard;

这就是 HTML 的样子，CSS 很大，必须裁剪一下。

【问题讨论】：

这么大的负 z-index 是否有原因。请向我们展示相关的 HTML。
为什么你的 z-index 有单位？这是supposed to be an integer。
@AHaworth 请查看编辑
已修复。谢谢大家。

标签： html css svg

【解决方案1】：

更改一些值，一切正常。

Css 是这样的

Default_View_Text___{

        position: absolute;
        margin-top: 20px;
        margin-left: 120px;
        top:25.05%;
        z-index: 1;
        font-family: 'Poppins';
        font-weight: bold;
        font-size: 15px;
        color: #1A73E8;
    }

【讨论】：