在矩形上創建陰影并在其上創建一個圓形-有解無憂

我的左側有一個矩形和一個圓形。兩者都是白色的。

我正在嘗試在矩形上創建一個陰影，并在矩形左側部分頂部的圓圈上創建一個陰影。

這是一個小提琴

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

我創建了 2 個過濾器，一個用于矩形，一個用于圓形。我在圓圈和矩形上評論了它們。

uj5u.com熱心網友回復：

您需要創建一個 defs 元素。目前您正在選擇一個，但沒有任何選擇，因為您沒有創建一個。

我增加了矩形陰影的不透明度、dx 和 dy，所以它在做某事更明顯。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416913.html

標籤：

上一篇：>*和沒有它有什么區別？

下一篇：更改svg動態樣式組件的填充顏色