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

Issues arise when a questionnaire is duplicated

Currently, I am working on a questionnaire that involves the cloning feature in jQuery using .clone(). The questions are answered using checkboxes with options for yes or no. These checkboxes are placed within a table and controlled by the following script ...

jqueryhtmllaravelcheckboxcheckboxlist

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

javascriptcssreactjshtml-tablematerial-ui

Unusual perspective of JSON with ng-jsoneditor in AngularJS

Currently, I have integrated ng-jsoneditor into my AngularJS application to display and format JSON data. I found guidance on how to implement this from both here and here. Here is the HTML code snippet: <div ng-jsoneditor="onLoad" ng-model="vm. ...

javascripthtmlangularjscss

Error encountered during PHP GET submission

I am currently working on a PHP page where users can select a season and episode from a form, which will then be sent to a page to play the selected episodes. Below is the form: <form action="view" method="get"> <select> <option name="s" ...

phphtml

Is it possible to customize the background color for particular days in FullCalendar?

How can I set background colors for specific days? While experimenting, I discovered this method: $('.fc-day15').css('backgroundColor','black'); The only issue is that the colors appear on the 16th day in the calendar grid, ...

jquerycssfullcalendar

What other option can be used in place of white-space:nowrap?

When using a textarea with the CSS property white-space:nowrap, it successfully removes spaces but adds a horizontal scrollbar to the text. I want to avoid the horizontal scrollbar while also preventing scrolling using arrow keys when using overflow-x:hi ...

jqueryhtmlcss

What causes the child positioning to break when a CSS-Filter is applied to the parent element?

One of my projects includes a title-screen "animation" where the title is initially centered on a fullscreen page and then shrinks and sticks to the top as you scroll down. I have provided a simplified working example below: $(window).scroll( () => ...

csscss-positioncss-transformscss-filters

Enhancing the menu/navigation bar with individual AJAX loaders

I have chosen the Vivant Designs theme for our website, which can be found at What I am looking to achieve is an ajax loader that will appear next to the link or tab when a user clicks on a link within the drilldown menu located on the left side. The cont ...

javascriptjqueryhtmlajax

Problem with sending a form using Ajax

I've set up a page that dynamically generates a list of items. Each item in the list includes a button to submit a form with data specific to that item (the sorting is working correctly). The form submission is handled by the following jQuery code: & ...

phpjqueryhtml

Utilizing a jQuery click event to modify the placement of a table

I have a request regarding the tables within the #middlebox. I would like to be able to rearrange the table positions by clicking on the list items. For instance, if the current order of the tables is starter -> soup -> seafood, clicking on the #seaf ...

javascriptjqueryhtml

Tips for extracting text from a selenium webelement icon that displays hovertext

Let's use Amazon as an example. Suppose we want to extract the star rating for a product. When hovering over the stars, we see a text element that says "4.0 out of 5 stars" and upon inspecting the code, we find: <span class="a-icon-alt">4.0 ou ...

pythonhtmlpython-3.xseleniumselenium-webdriver

Position the image, text, and header within a box in uniform alignment

Currently, I am working on a design that includes an image, a header, and some text inside a box. However, I am facing an issue with aligning the header so that it appears above the rest of the text. The layout is not turning out as expected. https://i.ss ...

htmlcss

Optimizing CSS usage within Django: top recommendations

Throughout a 6-month-long project, I have continuously added new URLs. However, I am now encountering an issue when using the extend 'base.html' function on other pages where the CSS overlaps and creates confusion. My question is: What are the b ...

javascriptpythonhtmlcssdjango

Tips for concealing content within table cells

I am facing an issue with my form that contains a table. When the user clicks on the radio button labeled "No", I want the content of the subsequent cells in that row to become visible. However, when they click on "Yes", the content should be hidden again. ...

javascripthtml

Angular is having trouble with the toggle menu button in the Bootstrap template

I recently integrated this template into my Angular project, which you can view at [. I copied the entire template code into my home.component.html file; everything seems to be working fine as the CSS is loading correctly and the layout matches the origina ...

javascripthtmlangulartypescript

Divs animated with jQuery keep on moving even after the animation has finished

My current project involves animating a single circle that scales, collides with two nearby circles, and then causes those circles to animate to specific positions. While everything works as expected, there is an issue where the two circles involved in the ...

javascriptjquerycssanimationjquery-animate

Adding a caption aligned to the right edge of an image in Wordpress

Any suggestions on aligning an image caption under an image tag to its right hand edge? I attempted using a div, but it seems it's not allowed in WordPress. Can anyone recommend alternative CSS or tags that I could use for this purpose? ...

htmlcsswordpressimagecaption

One particular page is having trouble loading CSS, whereas it loads perfectly fine on a different page

I have two pages, 403.html and 404.html, both of which need to load the same style.css file. Strangely, when I visit the 403.html page, the CSS loads perfectly fine. However, when I navigate to the 404.html page, even though it has identical code with only ...

htmlcss

What is the best way to ensure both landscape and portrait images are completely responsive and equal in height within a carousel?

I am currently working with a bootstrap carousel that contains both portrait and landscape images. On wide screens, the carousel height is automatically set to match the tallest image's height. However, this behavior results in white spaces on the top ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-carousel

HTML5 allows users to play a extended video for a set duration without the need for any video editing. Users are encouraged to utilize any approach

I have a video file named myvideo.mp4 that is 3 minutes long (or any length). <video width="320" height="240" controls="controls"> <source src="myvideo.mp4" type="video/mp4"> </video> Is there a way to play this myvideo.mp4 for only 20 ...

htmlvideovideo-streaminghtml5-video