使用CSS在鼠标悬停时过渡SVG路径的填充属性

Question

我在页面中使用object标签包含一个SVG图像文件，如下所示:

<object type="image/svg+xml" data="linkto/image.svg">
   <!-- fallback image in CSS -->
</object>

这张图片是一张世界地图，我希望当鼠标悬停在一个组上时，可以过渡填充属性。在这种情况下，我已经按大陆对SVG进行了分组，所以南美洲看起来像这样：

<g id="south_america">
    <path fill="#FAFAFA" d="(edited for brevity)"/>
</g>

我可以通过在SVG文档顶部使用以下CSS来在悬停时更改fill属性：

<style>
#south_america path {
    transition: fill .4s ease;
}
#south_america:hover path {
    fill:white;
}
</style>

但是我无法通过CSS过渡使fill颜色淡入，颜色只会瞬间改变，有人能解释一下吗？

- David Alsbright

---

这可能与您在HTML中通过填充属性设置原始填充以及通过CSS设置悬停填充有关，但我需要进行一些测试才能确定。一个JSFiddle真的会很有帮助。 - Robbie Wxyz

嗯，有趣的想法，我没有考虑过，我会再深入研究一下，同时先提供一个 jsfiddle 链接：http://jsfiddle.net/YLs6B/。 - David Alsbright

这里有一个 JSFiddle，其中 #europe 似乎可以正常工作：JSFiddle。另外，你给我的 fiddle 中不存在 #south_america。 - Robbie Wxyz

@DavidAlsbright #南美洲在那个小提琴中的ID为#south-america。北美洲也是如此。如果您更改ID以使用“_”，它将选择美洲地区。 - paulzag

Answer 1

为了实现渐变效果，CSS需要一个起始值和一个结束值。因为您使用SVG属性fill="#FAFAFA"来设置路径的颜色，CSS不会处理它，因此过渡不会淡化。相反，如果您使用CSS来设置颜色，则过渡将按预期进行。所以我所要做的就是给#europe一个起始填充色来实现过渡效果。

 path { transition: fill .4s ease; }
 /* set fill for before and for during hover */
 #europe       path { fill: red; }
 #europe:hover path { fill: white; }

这是一个可工作的JSFiddle。

---

或者，内联方式可能更方便（style=""）：

<path style="fill: #FAFAFA;" d="..."/>

为了让 CSS 实现淡入淡出效果，需要使用 CSS 或内联样式来指定起始和结束值（而不是使用 SVG 的 fill= 属性）。

- Robbie Wxyz

---

有一个需要注意的地方，似乎currentColor虽然看起来像是填充值，但实际上并不被视为填充。填充必须是显式的颜色值。 - Crispen Smith

似乎在IE11上不起作用，尽管这可能是一个没有解决方法的IE错误。[https://connect.microsoft.com/IE/feedbackdetail/view/920928/ie-11-css-transition-property-not-working-for-svg-elements]. Microsoft Edge正常运行。 - hmqcnoesy

Answer 2

请注意，要从HTML文档中通过CSS样式化SVG，SVG必须嵌入到页面的HTML中，即不能通过在HTML中嵌入<object>或<img>或通过CSS中的background-image等方式来嵌入。

当SVG嵌入到您的HTML中时，您可以使用CSS选择器匹配要样式化的元素并将适当的样式应用于它，就像样式化HTML元素一样。除了fill之外，还有一堆其他SVG属性，这些属性也是CSS属性。它们的列表可以在SVG规范或MDN上找到。

为了使过渡效果起作用，必须在CSS中定义开始和结束值。因此，需要通过style属性来定义填充颜色，而不是通过fill属性来定义（fill="#FAFAFA"）。

<path style="fill: #FAFAFA;" d="..."/>

或者通过在SVG内部使用<style>元素打包的CSS规则：

<style type="text/css">
  #south-america > path {
    fill: #FAFAFA;
  }
</style>

在这两种情况下，您都可以通过您提到的CSS规则来转换值。

将SVG嵌入HTML中的优点是您可以从用于HTML的样式表中进行样式设置，因此您可以定义在页面的HTML和嵌入式SVG之间共享的样式设置。

- Sebastian Zartner