CODEWITHSUNDEEP
csssvgd3.js
Ace
Ace

Reputation: 938

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

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.

Upvotes: 2

Views: 94

Answers (1)

Robert Longson
Robert Longson

Reputation: 124179

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>

Upvotes: 2

Related Questions