Any tips on animating my SVG when I hover my mouse over it with CSS or JavaScript?

Having trouble getting the gray outline to fill when hovering over it. The method I'm currently using isn't working on any browser. Any suggestions?

You can find the HTML with the inline SVG file below:

CSS is in a separate file, containing classes that are being animated:

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    text-align: center;
}

.SVG-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
}

.left {
    display: inline;
    fill: #0074BC;
}
.right {
    display: inline;
    fill: #00C2F3;
}

.outline-fill {
    fill: none;
    stroke:#25346A;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: dash 2s linear forwards;
    stroke-width:1.5;
    stroke-linecap: round;
    stroke-miterlimit: 0;
    animation-play-state: paused;
}

.outline-fill:hover {
    animation-play-state: running;
}

@keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }

.stroke {
    display: inline;
    fill: none;
    stroke: #9b9a9a;
    stroke-width: 1.0;
    stroke-linecap:round;
    stroke-miterlimit:10;
}

#fill {
    z-index: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="./style.css"> 
    <title>Animated SVG Icon</title>
</head>
<body>
    <header>
        <h1>Animated SVG "Contact Us" icon on hover:</h1>
    </header>
    <div class="SVG-container">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 117.1 76.5" style="enable-background:new 0 0 117.1 76.5;" xml:space="preserve">
        <g id="fill" class="fill-group">
            <path id="left-bubble" class="left" d="M52,8.4c-22.6,0-40.8,12.2-40.8,27.3c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2
                c-1,3.8-3.6,6.6-5.8,8.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6c....
...

htmlcssanimationsvg

Answer №1

Issue with Hover effect on SVG paths. One potential solution is to include the hover effect within the svg element.

svg:hover .outline-fill {
  animation-play-state: running;
}

Answer №2

This particular issue arises because of the fill:none property.

What this does is make the path invisible to any hover actions.

To fix this, simply update it to fill:transparent.

.SVG-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-right: auto;
  margin-left: auto;
}

.left {
  display: inline;
  fill: #0074BC;
}

.right {
  display: inline;
  fill: #00C2F3;
}

.outline-fill {
  fill: transparent;
  stroke: #25346A;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: dash 2s linear forwards;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-miterlimit: 0;
  animation-play-state: paused;
}

.outline-fill:hover {
  animation-play-state: running;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.stroke {
  display: inline;
  fill: none;
  stroke: #9b9a9a;
  stroke-width: 1.0;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

#fill {
  z-index: 0;
}
<div class="SVG-container">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 117.1 76.5" style="enable-background:new 0 0 117.1 76.5;" xml:space="preserve">
        <g id="fill" class="fill-group">
            <path id="left-bubble" class="left" d="M52,8.4c-22.6,0-40.8,12.2-40.8,27.3c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2
                c-1,3.8-3.6,6.6-5.8,8.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1
                c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4z M37.8,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C42.8,39.2,40.6,41.5,37.8,41.5z M52,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C57.1,39.2,54.9,41.5,52,41.5z M66.4,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C71.5,39.2,69.2,41.5,66.4,41.5z"/>
            <path id="right-bubble" class="right" d="M95.2,63.3c7.3-3,12.2-8.3,12.2-14.5c0-5.4-3.8-10.1-9.6-13.2C97,35.2,96,35.8,96,36.7
                c0,0.1,0,0.1,0,0.2c0,12...
                M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>

<!-- The section I'm aiming to animate on hover -->
           <path class="outline-fill" d="M20.5,63.9c-0.5,0.5-1,0....
       </g>

       </svg>
</div>

Answer №3

Attempted to reverse the animation on hover off, it works but starts with animation when the page loads

body {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  text-align: center;
}

.SVG-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-right: auto;
  margin-left: auto;
}

.left {
  display: inline;
  fill: #0074BC;
}

.right {
  display: inline;
  fill: #00C2F3;
}

.outline-fill {
  fill: none;
  stroke: #25346A;
  stroke-dasharray: 400;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-miterlimit: 0;
}

.SVG-container:hover .outline-fill {
  stroke-dashoffset: 0;
  animation: dash 2s linear;
}

.SVG-container:not(:hover) .outline-fill {
  stroke-dashoffset: 400;
  animation: undash 2s linear;
}

@keyframes dash {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes undash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 400;
  }
}

.stroke {
  display: inline;
  fill: none;
  stroke: #9b9a9a;
  stroke-width: 1.0;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

#fill {
  z-index: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="./style.css">
  <title>Animated SVG Icon</title>
</head>

<body>
  <header>
    <h1>Animated SVG "Contact Us" icon on hover:</h1>
  </header>
  <div class="SVG-container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 117.1 76.5" style="enable-background:new 0 0 117.1 76.5;" xml:space="preserve">
        <g id="fill" class="fill-group">
            <path id="left-bubble" class="left" d="M52,8.4c-22.6,0-40.8,12.2-40.8,27.3c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2
                c-1,3.8-3.6,6.6-5.8,8.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1
                c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4z M37.8,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C42.8,39.2,40.6,41.5,37.8,41.5z M52,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C57.1,39.2,54.9,41.5,52,41.5z M66.4,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C71.5,39.2,69.2,41.5,66.4,41.5z"/>
            <path id="right-bubble" class="right" d="M95.2,63.3c7.3-3,12.2-8.3,12.2-14.5c0-5.4-3.8-10.1-9.6-13.2C97,35.2,96,35.8,96,36.7
                c0,0.1,0,0.1,0,0.2c0,12-10.7,22.4-26,26.8c3.6,1.3,7.7,2.1,12.1,2.1c2.4,0,4.7-0.2,7-0.6c0.3-0.1,0.5,0.1,0.7,0.3
                c1.2,1.7,3.4,4.2,6.4,5.1c0.5,0.2,0.9-0.5,0.6-0.9c-1-1.3-2.3-3.4-2-5.7C94.7,63.6,94.9,63.4,95.2,63.3z"/>
            </g>
           <g id="outline-group">
           <path id="outline" class="stroke" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
               c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
               c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
               c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
               c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
               c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
               c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
                M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
               c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>

<!-- This is what I'm aiming for in the hover animation -->
           <path class="outline-fill" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
               c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
               c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
               c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
               c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
               c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
               c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
                M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
               c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>
       </g>

       </svg>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restore checkbox to default setting

Is it possible to reset checkboxes in a form back to their initial status using javascript, PHP, jQuery, or any other method? Here is the code I am currently using: <form method="POST> <input type="text" name="name" id="name" value="default val ...

javascriptjqueryhtmlajaxcheckbox

I’m having trouble getting my home.html page to render in Spring Boot

This image perfectly encapsulates the essence of my code and project structure. I am encountering an issue where I cannot return the home.html file located in the static folder. I have tried specifying it as 'home' or 'home.html', but n ...

htmlspring-bootcontroller

The outcome of the JQuery function did not meet the anticipated result

Here is the code I am using: $("p").css("background-color", "yellow"); alert( $("p").css("background-color")); The alert is showing undefined instead of the expected color value. I have tested this code on both Google Chrome and Firefox. Strangely, it w ...

javascriptjqueryhtmlcss

Node.js script encounters errors fetching static files

My HTML index.html file has multiple containers, and I have included the bootstrap and font awesome folders in the <head> section like this: <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap/css/bootstra ...

htmlnode.jsexpress

Menu Selector on the Right Side

I am currently working on a drop down menu and trying to align it to the right using HTML and CSS. Below is an example that I have been referencing: http://codepen.io/anon/pen/RNLmvq Attached here is a screenshot of how the menu appears without the text ...

csshtmldrop-down-menu

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...

javascripthtmlcsssticky

Using jQuery to target a specific item from a retrieved list of elements

I'm currently working on a photo gallery feature that is reminiscent of Instagram or Facebook user photos. My goal is to enable users to view details about each image (such as the date) in a box that appears over the image when they hover over it. E ...

javascriptphpjqueryhtml

Instructions for selecting an <option> within a <select> element using Python

I am trying to select a specific option by id, but I am encountering an issue when dealing with the elements above the select dropdown. <ul style="display: block; visibility: visible;"><li><a href="#" index="0" class="" onclick="s_objectID= ...

pythonhtmlselenium

Harnessing the power of Selenium to locate an anchor tag containing HTML elements with specific classes

I have a specific element on my webpage that I need to extract the text "Add New Member" using Selenium. Here is the HTML code for the element: <a ng-if="userCanEdit" class="btn btn-primary ng-scope" ui-sref="orgs-add" href="#/orgs/add"> <i& ...

javajqueryhtmlselenium

What's causing Angular to not display my CSS properly?

I am encountering an issue with the angular2-seed application. It seems unable to render my css when I place it in the index.html. index.html <!DOCTYPE html> <html lang="en"> <head> <base href="<%= APP_BASE %>"> < ...

javascripthtmlcssangulartypescript

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

htmlcss

Difficulties encountered while attempting to modify a class using Javascript

Recently, I've encountered an issue with my JavaScript where I am unable to keep a particular element's class changed. Despite attempting to change the class to "overlist", it only stays that way briefly before switching back to its original stat ...

javascripthtmlcssfunctionclass

Using Google fonts offline: a step-by-step guide

Is it possible to download Google fonts and link them offline for a localhost webpage? ...

htmlcss

Unable to make a div grow within a Popper component in a React.js application

I'm facing a challenge with implementing a CSS feature and need some assistance. https://i.stack.imgur.com/KXpGd.png Upon clicking the "See link options" button, the content loads but spills out of the popper. My goal is to have the popper expand in ...

javascripthtmlcssreactjsfrontend

Utilizing Python and Selenium for Xpath, extracting text from a span tag within a web table

Struggling with this one, I've carefully gone through all previous posts before reaching out for help. The structure of the HTML web table is provided below. I am specifically interested in extracting the date from the span tag, and here are the vari ...

pythonhtmlselenium-webdriverxpath

Looking to include some extra padding when an item is displayed - jQuery

So, I'm working on a jQuery code snippet that controls the visibility of a rectangle element: $("#rectangle").hide(); $("#toggle-rec").click(function () { $("#rectangle").toggle(2000); }); This code hides the rectangle initially and toggles it ...

javascriptjqueryhtmlcss

conceal only a few HTML elements

When a user enters text into my comment box, it is saved in the database with additional formatting. For example: aa @Martins <aabb> The saved version in the database looks like this: aa <span class="highlight" contenteditable="false">@Marti ...

phphtmltags

The @media feature is not functioning properly

I am struggling with getting my media query to function properly on a school project. Despite carefully checking my code, I cannot figure out why it is not making the desired changes when viewed on a mobile device. If anyone has any suggestions or insigh ...

cssmedia

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

csssasscompass-sassadobe-brackets

Coding in HTML for the Font Awesome Plus/Minus Icon Toggle

In my role as a knowledge base manager, I primarily use Adobe RoboHelp and rarely need to utilize HTML outside of the standard editor. However, I am currently working on implementing a dropdown feature that involves changing the font awesome icon from fa-p ...

htmlfont-awesomerobohelp