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

あなたは全体の束を作成する必要はありません。 2つのレイヤーで重複しています。あなたがする必要があるのは、グループ内のすべての六角形をラップして（<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を超えているので、影が見える六角形のいずれかの上に現れないだろう...