SVG陰影分層

Question

我想爲我使用d3和SVG繪製的陰影設置陰影，但我在疊加相鄰元素的陰影時遇到了問題。看到下面的圖片，瞭解它目前的樣子。請注意，中間的六邊形看起來有不同的高度，因爲陰影正在其中一些上面呈現。我想要做的就是設置陰影，使它們只在背景上渲染，而不是在其他相鄰的格子上。

這裏是如何，目前正在定義陰影代碼：

 var filter = defs.append("filter") 
     .attr("id", "drop-shadow") 
     .attr("height", "130%"); 

    // SourceAlpha refers to opacity of graphic that this filter will be applied to 
    // convolve that with a Gaussian with standard deviation 3 and store result 
    // in blur 
    filter.append("feGaussianBlur") 
     .attr("in", "SourceAlpha") 
     .attr("stdDeviation", 1) 
     .attr("result", "blur"); 

    // translate output of Gaussian blur to the right and downwards with 2px 
    // store result in offsetBlur 
    filter.append("feOffset") 
     .attr("in", "blur") 
     .attr("dx", 1) 
     .attr("dy", 1) 
     .attr("result", "offsetBlur"); 

    // overlay original SourceGraphic over translated blurred opacity by using 
    // feMerge filter. Order of specifying inputs is important! 
    var feMerge = filter.append("feMerge"); 

    feMerge.append("feMergeNode") 
     .attr("in", "offsetBlur") 
    feMerge.append("feMergeNode") 
     .attr("in", "SourceGraphic"); 

的樣式會應用到六邊形：

d3.select(this).style("filter", "url(#drop-shadow)")

Answer 1

你並不需要創建一個一大堆兩層重複。你所需要做的就是將所有的六邊形包裝在一個組中（<g>），並將過濾器應用到該組中。

<svg> 
 
    <defs> 
 
    <filter id="drop-shadow" width="150%" height="150%"> 
 
     <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> 
 
     <feOffset in="blur" dx="2" dy="2" result="offsetBlur"/> 
 
     <feMerge> 
 
     <feMergeNode in="offsetBlur"/> 
 
     <feMergeNode in="SourceGraphic"/> 
 
     </feMerge> 
 
    </filter> 
 
    </defs> 
 

 
    <rect x="75" y="75" width="50" height="50" fill="cyan" 
 
     filter="url(#drop-shadow)"/> 
 
    <rect x="75" y="25" width="50" height="50" fill="gold" 
 
     filter="url(#drop-shadow)"/> 
 
    <rect x="25" y="75" width="50" height="50" fill="lime" 
 
     filter="url(#drop-shadow)"/> 
 
    <rect x="25" y="25" width="50" height="50" fill="red" 
 
     filter="url(#drop-shadow)"/> 
 

 
    <g filter="url(#drop-shadow)" transform="translate(150,0)"> 
 
    <rect x="75" y="75" width="50" height="50" fill="cyan"/> 
 
    <rect x="75" y="25" width="50" height="50" fill="gold"/> 
 
    <rect x="25" y="75" width="50" height="50" fill="lime"/> 
 
    <rect x="25" y="25" width="50" height="50" fill="red"/> 
 
    </g> 
 
</svg>

Answer 2

我有找出一個臨時解決方案。從本質上講，它涉及到創建兩套不同的層上六邊形的：

1. 沒有填充/筆觸底層在一組，但與頂層上所有的填充/筆觸的陰影
2. 一組，但沒有陰影

由於＃2＃1以上，影子將不會在任何可見六邊形的頂部顯示...