I am currently working on implementing an SVG world map with interactive country selection. I am aiming to incorporate a shadow effect for a specific country upon the onmouseenter event. The functionality is mostly successful, but I have encountered an issue where shadows do not entirely align with the borders of certain countries. The desired outcome is to have the entire country surrounded by the shadow effect:https://i.sstatic.net/i52SO.png
For some countries, however, the shadow appears to be missing along the southern border as shown in this example: https://i.sstatic.net/ESkGW.png
What could be causing this discrepancy? I have experimented with different SVG files and consistently faced the same problem.
While I am utilizing the Rust Yew framework for development, I believe the issue lies more within SVG or CSS aspects that I may not be well-versed in. Below is a snippet of my CSS:
.shadow {
filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
z-index: 999;
}
This is how I render the map:
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>
}
Please advise if sharing the SVG data would be helpful in resolving this issue.