我正在尝试使用 SVG 创建图表并使用 PHP 操作数据编号，我想在 SVG 矩形显示数据属性时悬停。但它在 'rect' 中的::after 或::before 选择器中不起作用。我的问题是:可以将这些选择器::after 和::before 放在“矩形”、“圆”或“折线”中吗？
<html>
<head>
<style>
svg{
height:100vh;
}
rect{
pointer-events: all;
}
rect:hover:after{
content: attr(data-hover);
display: block;
background: #000;
position: absolute;
top: 100%;
left: -7px;
right: -7px;
padding: 15px;
}
</style>
</head>
<body>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 600 570" style="enable-background:new 0 0 600 570;" xml:space="preserve">
<style type="text/css">
.barch0{font-family:'Arial Black';}
.barch1{font-size:15px;}
.barch2{fill:none;stroke:#A8A8A8;stroke-width:20;stroke-miterlimit:10;}
.barch3{fill:#65CDC8;}
.barch4{fill:#00B3E4;}
.barch5{fill:#39AEA8;}
.barch6{fill:#00C4EE;}
rect:hover{
fill:red;
}
</style>
<text transform="matrix(1 0 0 1 130 450)" writing-mode="tb" class="barch0 barch1">JULIO</text>
<polyline class="barch2" points="650,420 50,420 50,20 "/>
<g transform="rotate(180 268 220)">
<rect data-hover="123.323" x="380" y="50" class="barch3" width="50" height="50"></rect>
</g>
<text transform="matrix(1 0 0 1 0 350)" class="barch0 barch1">50</text>
</svg>
</body>
</html>
我希望当鼠标悬停在“rect”时显示 data-hover 属性，我尝试使用::after 和::before 但都不起作用。
最佳答案
SVG 不支持
::before 和::after 伪元素 - 但可能会在未来的规范中添加。请参阅当前的 SVG2 工作草案:
https://svgwg.org/svg2-draft/single-page.html#text-TextProperties
关于html - 如何在 SVG 矩形中添加选择器之前或之后？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58044703/