How to add before or after selector in a SVG rectangle?

I am trying to create a chart with SVG and manipulate data-numbers with PHP, I want to hover when SVG rectangle shows the data-attribute. But it didn't work in ::after or ::before selector in . It is possible to put these selectors in 'rect', 'circle' or '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>

I expect when hover in 'rect' show the data-hover attribute, I tried with ::after and ::before but neither work.

5 answers

  • answered 2019-09-21 23:21 devolasoji

    Do you mean something like this? https://www.w3schools.com/howto/howto_css_image_overlay_title.asp

    You can also try :hover instead of :before and :after.

  • answered 2019-09-21 23:38 Jaylukmann

    I am not sure SVG support the regular css rules. It has its own rules which you have to work with. For details on SVG css rules,check developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS

  • answered 2019-09-22 02:51 Dittocci

    Though they might seem similar, SVG uses slightly different rules from CSS. The ::before and ::after pseudo-elements are not supported in SVG. Check SVG and CSS for alternatives.

  • answered 2019-09-22 03:59 paramshivaay

    SVG has its own variant of CSS with slightly different rules. I believe though that SVG does not support the ::before and ::after pseudo-elements that HTML's CSS does. Check this out developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS

  • answered 2019-09-22 20:47 Michael Mullany

    ::before and ::after pseudo elements are not supported in SVG - but may be added in a future spec. Please see the current SVG2 working draft:

    https://svgwg.org/svg2-draft/single-page.html#text-TextProperties