Saya ingin memiliki bayangan untuk plot yang saya buat menggunakan d3 dan SVG, tetapi saya mengalami masalah dengan bayangan jatuh yang tumpang tindih dengan elemen yang berdekatan. Lihat gambar di bawah untuk tampilannya saat ini. Perhatikan segi enam di tengah tampak memiliki ketinggian yang bervariasi karena bayangan dirender di atas beberapa di antaranya. Apa yang ingin saya lakukan adalah mengatur bayangan sedemikian rupa sehingga hanya dirender di latar belakang, dan tidak di atas heksa lain yang bersebelahan.

Berikut adalah kode untuk bagaimana bayangan saat ini didefinisikan:

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

Gaya tersebut kemudian diterapkan ke segi enam:

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

Shadows overlapping hexagaons

4
jrdnmdhl 8 Agustus 2017, 05:10

2 jawaban

Jawaban Terbaik

Anda tidak perlu membuat banyak duplikat dalam dua lapisan. Yang perlu Anda lakukan adalah membungkus semua segi enam Anda dalam sebuah grup (<g>) dan menerapkan filter untuk itu.

<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>
5
Paul LeBeau 8 Agustus 2017, 03:55