1

我正在尝试渲染可以选择国家/地区的 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>
}

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

4

1 回答 1

3

其他国家的轮廓在上面，遮住了阴影。

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

于 2021-11-17T20:42:08.550 回答