SVG 阴影不重复元素轮廓

Question

我正在尝试渲染我可以 select 个国家/地区的 SVG 世界地图。我想为 onmouseenter 事件添加特定国家/地区的阴影效果。一切正常，除了对于某些国家/地区，阴影不会完全沿着国家/地区边界移动。这是它应该如何工作，整个国家都被阴影包围：

这是一些国家的情况，您可以看到南部边界没有阴影：

您认为这是什么原因？我尝试了几个 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 onmouseenter = Callback::from(|e: MouseEvent| Country::toggle_highlight(e, true));
    let onmouseleave = 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>
}

我不确定这里 post SVG 数据是否有意义，如果有必要请告诉我。

Answer 1

其他国家/地区的轮廓在上面并遮住了阴影。

要显示阴影，请移动元素，使其排在 DOM 顺序的最后。

SVG 阴影不重复元素轮廓

SVG shadows do not repeat the element contour

html

css

svg

rust

yew