html - 如何在 SVG 图像前渲染文本
问题描述
如何在 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> <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> </td>
</tr>
</table>
</div>
</div>
</div>
);
}
export default DashBoard;
这就是 HTML 的样子,CSS 很大,不得不裁剪一下。
解决方案
更改一些值,一切正常。
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;
}
推荐阅读
- python - 如何使用一个命令提取 numpy 数组的切片和特定列?
- rust - 如何在 Rust 中使用 `dlsym()`
- ruby-on-rails - ActionText:具有表格支持和白名单属性的自定义附件(如样式)
- unity3d - 在 Ubuntu 中使用 Unity,但为 Windows 平台构建
- reactjs - 如何动态地将 React Web 组件添加到父组件?
- python-xarray - 将变量分配给数据集,沿维度的每个位置的值相同
- javascript - 您如何从使用背景图像获取的包含文件中更改 svg 元素的颜色: url("file-name.svg");
- react-native - 在 react native 中获取之前的网名
- node.js - 为什么我的 express.js 服务器失败了初始块流请求而不是下一个?
- swift - Swift - 呈现已呈现的弹出框时应用程序崩溃