SVG陰影不重復元素輪廓-有解無憂

我正在嘗試渲染一個 SVG 世界地圖，我可以在其中選擇國家/地區。我想為活動的特定國家/地區添加陰影效果onmouseenter。除了某些國家/地區的陰影不完全遵循國家/地區邊界外，一切正常。這是它應該如何作業，整個國家都被陰影包圍： SVG 陰影不重復元素輪廓

以下是某些國家/地區發生的情況，您可以看到南部邊界沒有陰影： SVG 陰影不重復元素輪廓

你覺得是什么原因呢？我嘗試了幾個 SVG，但總是出現同樣的問題。

我正在使用 Rust Yew 框架來構建它，但是，我認為問題更多地與我不太了解的 SVG 或 CSS 相關。這是我的 CSS：

.shadow {
    filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
    z-index: 999;
}

這是我渲染地圖的方式：

impl Country {
  fn toggle_highlight(e: MouseEvent, enable: bool) {
    let style = if enable {
      "#fcecec"
    } else {
      "#ececec"
    };
    let class = if enable {
      "country shadow"
    } else {
      "country"
    };
    e.target()
      .and_then(|t| t.dyn_into::<SvgElement>().ok())
      .map(|el| {
        el.set_attribute("fill", style)
          .expect("Unable to set style attribute for the country path");
        el.set_attribute("class", class)
          .expect("Unable to set class attribute for the country path");
      });
  }

  fn render(&self) -> Html {
    let onm ouseenter = Callback::from(|e: MouseEvent| Country::toggle_highlight(e, true));
    let onm ouseleave = Callback::from(|e: MouseEvent| Country::toggle_highlight(e, false));
    html! {
      <path class="country" id={self.id.clone()} name={self.name.clone()} d={self.path.clone()} onmouseenter={onmouseenter} onmouseleave={onmouseleave}></path>
    }
  }
}

...

html! {
  <svg baseprofile="tiny" fill="#ececec" stroke="black" viewBox="0 0 1500 1500"
       width="100%" height="100%" stroke-linecap="round" stroke-linejoin="round"
       stroke-width=".2" version="1.2" xmlns="http://www.w3.org/2000/svg"
       style="border: 1px solid red">
    { for build_countries_list().iter().map(|c| c.render()) }
  </svg>
}

我不確定在這里也發布 SVG 資料是否有意義，如果有必要請告訴我。

uj5u.com熱心網友回復：

其他國家/地區的輪廓位于頂部并掩蓋了陰影。

要顯示陰影，請移動元素使其在 DOM 順序中排在最后。

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

標籤：html css svg 锈红豆杉

上一篇：難以將藍色變為透明

下一篇：無法在多模塊Maven專案中決議值“${test.name}”中的占位符“test.name”-SpringBoot