CODEWITHSUNDEEP
htmlcsssvg
14714
14714

Reputation: 53

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 'rect' . My question is: It is possible to put these selectors ::after and ::before 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.

Upvotes: 2

Views: 2769

Answers (3)

Michael Mullany
Michael Mullany

Reputation: 31805

::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

Upvotes: 2

Dittocci
Dittocci

Reputation: 11

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.

Upvotes: 1

Jaylukmann
Jaylukmann

Reputation: 119

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

Upvotes: 1

Related Questions