Question

我是d3的新手。我正在尝试添加一些气泡功能到圆圈，这是d3中的drwan。我已经添加了CSS来实现泡泡效果。
我检查了元素css被添加到圆圈但气泡效果没有反映。在此先感谢

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

Answer 1

内联SVG被视为图像，图像被替换为不允许生成内容的元素。

CSS :before on inline SVG

前后伪选择器不插入HTML元素 - 它们在目标元素的现有内容之前或之后插入文本。因为图像元素不包含文本或有后代，所以img：before或img：after都没有任何好处。

Does :before not work on img elements?

这也可以帮助你：

SVG drop shadow using css3

SVG gradient using CSS

将css附加到D3中的svg

1 个答案: