Я включаю файл 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, цвет сразу меняется, может ли кто-нибудь пролить свет на это, пожалуйста?