Я пытаюсь создать диаграмму с SVG и манипулировать числами данных с помощью PHP, я хочу навести курсор мыши, когда прямоугольник SVG показывает атрибут данных.Но он не работал в селекторе :: after или :: before в 'rect'.Мой вопрос: можно поместить эти селекторы :: after и :: before в 'rect', 'circle' или 'polyline'?
<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' отобразитсяАтрибут hover, я пытался с :: after и :: before, но ни одна из них не работает.