creating drop shadow on a rectangle and a circle on top of it

Solution 1:

You need to create a defs element. At the moment you're selecting one but there's nothing to select because you didn't create one.

I've increased the opacity, dx and dy of the rect shadow so it's more obvious that it's doing something.

let svg = d3.select("#container")
        .append("svg");
        
        svg.append("defs")

        svg.select("defs")
        .append("filter")
        .attr("width", "160%")
        .attr("height", "160%")
        .attr("id", "nodeShadow")
        .append("feDropShadow")
        .attr("dx", 8)
        .attr("dy", 8)
        .attr("stdDeviation", 3)
        .attr("flood-opacity", 1)
        .attr("flood-color", "lightgray");
        
         svg.select("defs")
        .append("filter")
        .attr("id", "circleShadow")
        .append("feDropShadow")
        .attr("dx", 2.0)
        .attr("dy", 1.6)
        .attr("stdDeviation", 4)
        .attr("flood-color", "lightgray");
        
    // node
    let containerNode = svg.append("g");

    containerNode.append("rect")
        .attr("x", 100)
        .attr("y", 150)
        .attr("filter", "url(#nodeShadow)")
        .attr("fill", "#FFFFFF")
        .attr("width", 250)
        .attr("height", 30);

    containerNode.append("circle")
        .attr("cx", 115)
        .attr("cy", 165)
        .attr("r", 15)
        .attr("fill", "transparent")
        //.attr("filter", "url(#circleShadow)")
        .attr("stroke", "#ffffff")
        .attr("stroke-width", "0.001")
        .attr("width", 30)
        .attr("height", 30);

#container {
 height: 100%;
 width: 100%;
}

svg {
    background: yellow;
    width: 1324px;
    height: 324px;
}

.node {
  fill: #FFFFFF;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="container"></div>

creating drop shadow on a rectangle and a circle on top of it

Solution 1:

Related

Recent Posts