Использование CSS для перехода свойства заливки пути SVG при зависании

Я включаю файл SVG-изображения на моей странице в теге object, например:

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

Образ, о котором идет речь, является картой мира, я хочу переместить свойство fill, когда мышь нависает над group, в этом случае я сгруппировал SVG по континенту, так что Южная Америка выглядит примерно так:

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

Я могу получить свойство fill для изменения при наведении, используя следующий CSS в верхней части моего документа SVG:

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

Но я не могу заставить цвет fill исчезать с переходом CSS, цвет сразу меняется, может ли кто-нибудь пролить свет на это, пожалуйста?

Ответы

Ответ 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.

Или, сделать это inline может быть более удобным (style=""):

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

Для того, чтобы CSS выполнял ваше затухание, он должен обрабатывать начальные и конечные значения в стиле CSS/inline (в отличие от использования атрибута SVG fill=).

Ответ 2

Обратите внимание, что для стилизации SVG с помощью CSS из документа HTML, SVG должен быть встроен в HTML страницы, то есть он не работает, внедряя его через <object> или <img> в HTML или через background-image и т.д. в CSS.

Когда он встроен в ваш HTML, вы можете стилизовать все его элементы так же, как вы стилизуете элементы HTML, используя селектор CSS, чтобы соответствовать элементу (ам), который вы хотите стилизовать, и применяя к нему соответствующие стили. Помимо fill есть множество других атрибутов SVG, которые также являются свойствами CSS. Список их можно найти в спецификации SVG или в MDN.

Чтобы переход работал, в CSS должны быть определены как начальное, так и конечное значение. Таким образом, вместо определения цвета заливки с помощью атрибута fill (fill="#FAFAFA"), его необходимо определить либо с помощью атрибута style, который выглядит следующим образом:

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

или с помощью правила CSS, упакованного в элемент <style> в SVG:

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

В обоих случаях вы можете затем перенести значения через упомянутое вами правило CSS.

Встраивание SVG в HTML имеет то преимущество, что вы можете выполнять стилизацию из таблицы стилей, которую вы используете для своего HTML, поэтому вы можете определять стили, которые разделяются между HTML вашей страницы и встроенным SVG.