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

Question

I have a rectangle and a circle on its left side. Both are white.

I'm trying to create a drop shadow on the rectangle and a drop shadow on the circle which is on top of the rectangle left part.

Here's a fiddle

https://jsfiddle.net/fLbz6qn1/30/

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

    svg.select("defs")
    .append("svg:filter")
    .attr("id", "nodeShadow")
    .append("feDropShadow")
    .attr("dx", 0.5)
    .attr("dy", 3.2)
    .attr("stdDeviation", 3)
    .attr("flood-opacity", 0.3)
    .attr("flood-color", "lightgray");
    
     svg.select("defs")
    .append("svg: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);

I created 2 filters, one for the rect and one for the circle. I commented them out on the circle and rect.

user_1038015 · Answer

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

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

1 Answers