使用 CSS 在悬停时转换 SVG 路径的填充属性答案

【问题标题】：Using CSS to transition the fill property of an SVG path on hover使用 CSS 在悬停时转换 SVG 路径的填充属性
【发布时间】：2013-11-29 12:07:12
【问题描述】：

我在我的页面上的object 标记中包含了一个 SVG 图像文件，如下所示：

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

有问题的图像是世界地图，当鼠标悬停在 group 上时，我想转换 fill 属性，在这种情况下，我按大陆对 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 颜色淡入，颜色会立即改变，有人能解释一下吗？

【问题讨论】：

这可能与您通过 HTML 中的填充属性设置原始填充以及通过 CSS 设置悬停填充有关，但我必须进行一些测试才能确定。 JSFiddle 真的很有帮助。
嗯，很有趣，我没有考虑过，我会再深入一点，同时这里有一个小提琴：jsfiddle.net/YLs6B
这是#europe 似乎正在工作的小提琴：JSFiddle。另外，#south_america 在你给我的小提琴中不存在。
@DavidAlsbright #south_america 在那个小提琴中有 ID #south-america。北美也一样。如果您更改 id 以使用“_”它会选择美洲

标签： css svg hover css-transitions

【解决方案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= 属性）。

【讨论】：

一个警告（各种）似乎 currentColor 虽然它看起来像一个填充值，但没有被这样对待。填充必须是明确的颜色值。
似乎不适用于 IE11，尽管这可能是一个没有解决方法的 IE 错误。 [connect.microsoft.com/IE/feedbackdetail/view/920928/…。 MS Edge 工作正常。

【解决方案2】：

请注意，要在 HTML 文档中通过 CSS 设置 SVG 样式，SVG 必须嵌入到页面的 HTML 中，即通过 <object> 或 <img> 将其嵌入 HTML 或通过 CSS 中的background-image 等。

当它嵌入到您的 HTML 中时，您可以像设置 HTML 元素一样设置其所有元素的样式，使用 CSS 选择器匹配您想要设置样式的元素并对其应用适当的样式。除了fill，还有一堆其他的 SVG 属性，它们也是 CSS 属性。可以在SVG specification 或MDN 中找到它们的列表。

为了使过渡生效，必须在 CSS 中定义开始值和结束值。因此，与其通过fill 属性（fill="#FAFAFA"）定义填充颜色，不如通过style 属性定义填充颜色，如下所示：

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

或通过封装在 SVG 中 <style> 元素中的 CSS 规则：

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

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

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

【讨论】：