Append css to svg in D3

Question

Am newbie to d3.I am trying to add some bubble feature to circle which is drwan in d3.I have added CSS to achive bubble effect.
I have inspect the element css is added to the circle but bubble effet is not reflecting. Thanks in Advance

<style type="text/css">
.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: -1;
}

.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}

</style>

<script type="text/javascript">

circleRadii = [40]

 svgContainer = d3.select("body").append("svg");


    gcontainer=svgContainer.append("g").attr("width", 600)
                                    .attr("height", 100);

var circles = gcontainer.selectAll("circle")
                          .append("g")
                          .data(circleRadii)
                          .enter()
                          .append("circle")

var circleAttributes = circles
                       .attr("cx", 50)
                       .attr("cy", 50)
                       .attr("r", function (d) { return d; })
                       .style("fill", "green")
                       .attr("class","ball");

</script>

there is no such things as `:before` in svg elements. – Miguel Mota May 14 '15 at 05:29 — Miguel Mota, May 14 '15 at 05:29

score 1 · Answer 1 · edited May 23 '17 at 11:43

Inline SVG is treated as an image, and images are replaced elements which are not allowed to have generated content.

CSS :before on inline SVG

The before and after pseudo-selectors don't insert HTML elements — they insert text before or after the existing content of the targeted element. Because image elements don't contain text or have descendants, neither img:before or img:after will do you any good.

Does :before not work on img elements?

This may also help you out:

SVG drop shadow using css3

SVG gradient using CSS

Append css to svg in D3

1 Answers1

Linked