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

Using CSS to transition the fill property of an SVG path on hover

提问by David Alsbright

I'm including an SVG image file on my page within an objecttag, like this:

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

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

The image in question is a world map, i want to transition the fillproperty when the mouse hovers over a group, in this case I've grouped my SVG by continent, so South America looks something like this:

有问题的图像是一张世界地图，我想fill在鼠标悬停在 a 上时转换属性group，在这种情况下，我按大陆对我的 SVG 进行了分组，因此南美洲看起来像这样：

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

I can get the fillproperty to change on hover by using the following CSS at the top of my SVG document:

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

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

But I can't get the fillcolour to fade in with a CSS transition, the colour just changes instantly, can anyone shed light on this please?

但是我无法通过fillCSS 过渡让颜色淡入淡出，颜色会立即改变，有人能解释一下吗？

回答by Robbie Wxyz

In order to transition/fade, CSS needs a starting value and an ending value.
Because you set the color for the path using the SVG attribute fill="#FAFAFA", CSS doesn't process it and the transition doesn't fade.

为了过渡/淡入淡出，CSS 需要一个起始值和一个结束值。
因为您使用 SVG 属性设置路径的颜色，所以fill="#FAFAFA"CSS 不会处理它并且过渡不会褪色。

Instead if you use CSS to set the color, the transition will behave as expected

相反，如果您使用 CSS 来设置颜色，则过渡将按预期进行

So all I had to do to make the transition work is give the #europea starting fill to transition from.

所以我所要做的就是让过渡工作是#europe开始填充过渡。

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

Here's a working JSFiddle.

这是一个有效的JSFiddle。

---

---

Or, doing it inline can be more convenient (style=""):

或者，内联执行会更方便 ( style="")：

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

Just in order for CSS to do your fading, it needs to handle the start and end values in CSS/inline style (as opposed to using the SVG fill=attribute).

只是为了让 CSS 做你的淡入淡出，它需要处理 CSS/内联样式中的开始和结束值（而不是使用 SVGfill=属性）。

回答by Sebastian Zartner

Note that to style an SVG via CSS from within an HTML document, the SVG has to be embedded within the HTML of the page, i.e. it doesn't work by embedding it via <object>or <img>in HTML or via background-imageetc. in CSS.

请注意，要通过 HTML 文档中的 CSS 设置 SVG 的样式，SVG 必须嵌入到页面的 HTML 中，即它不能通过嵌入<object>或嵌入<img>HTML 或嵌入background-imageCSS 等方式工作。

When it's embedded within your HTML, you can then style all its elements like you style HTML elements using a CSS selector to match the element(s) you want to style and applying the appropriate styles to it. Besides fillthere is a bunch of other SVG attributes, which are also CSS properties. A list of them can be found in the SVG specificationor on MDN.

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

In order for a transition to work, both the start and the end value have to be defined in CSS. So, instead of defining the fill color via the fillattribute (fill="#FAFAFA"), it needs to be defined either via the styleattribute, which looks like this:

为了让过渡起作用，开始值和结束值都必须在 CSS 中定义。因此，不是通过fill属性 ( fill="#FAFAFA")定义填充颜色，而是需要通过style属性定义，如下所示：

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

or via a CSS rule packed in a <style>element within the SVG:

或者通过打包在<style>SVG中的元素中的CSS 规则：

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

In both cases you can then transition the values via the CSS rule you mentioned.

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

Embedding the SVG within HTML has the advantage that you can do the styling from within the stylesheet you use for your HTML, so you can define styling that are shared between the HTML of your page and the embedded SVG.

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