It appears that Vivus JS is having difficulty animating specific <path> elements

I've been experimenting with the Vivus JS library, which is fantastic for animating paths such as drawing an image. However, I'm facing an issue where my SVG icon should animate to a 100% line-width, but it's not working as expected. Interestingly, this works fine on other icons in my project.

You can check out this CodePen for reference: http://codepen.io/anon/pen/yOqdbN

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="...">
  <path d="...">
</svg>

If anyone has insights into why this might be happening, I would greatly appreciate any guidance provided. Thank you!

javascriptanimationsvgsvg-pathvivus

Answer №1

Vivus operates by animating the strokeDashOffset attribute of a path which necessitates that your path has a stroke designated, for example:

<path d="..." stroke="black">

It is important to note, based on your nodes, that you may achieve superior outcomes by setting fill="transparent".

var els = document.querySelectorAll('path');
Array.prototype.slice.call(els).forEach(function(el) {
  el.setAttribute('stroke', 'black')
  el.setAttribute('fill', 'transparent')
})
var SVGcrown = new Vivus('SVGcrown', {
  duration: 300,
  animTimingFunction: Vivus.EASE_OUT
});
body {
  background: #FFF;
}
#SVGcrown {
  width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.0/vivus.js"></script>

<svg id="SVGcrown" enable-background="new 0 0 48 48" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M41.93,38H6.07l-0.251-0.167C2.175,35.413,0,31.363,0,27c0-7.168,5.832-13,13-13c2.069,0,4.128,0.499,5.954,1.442     l-0.918,1.777C16.47,16.41,14.776,16,13,16C6.935,16,2,20.935,2,27c0,3.594,1.744,6.936,4.681,9h34.638     C44.256,33.936,46,30.594,46,27c0-6.065-4.935-11-11-11c-1.778,0-3.473,0.411-5.04,1.222l-0.919-1.775     C30.868,14.5,32.929,14,35,14c7.168,0,13,5.832,13,13c0,4.363-2.175,8.413-5.819,10.833L41.93,38z"
  />
  <path d="M42,48H6c-2.611,0-3.978-2.013-3.978-4.001C2.022,42.012,3.389,40,6,40h36c2.611,0,3.978,2.013,3.978,4.001     C45.978,45.988,44.611,48,42,48z M6,42c-1.46,0-1.978,1.077-1.978,1.999C4.022,44.922,4.54,46,6,46h36     c-1.46,0,1.978-1.077,1.978-1.999C43.978,43.078,43.46,42,42,42H6z"
  />
  <path d="M12.695,32.032c-0.411,0-0.795-0.255-0.942-0.663C11.253,29.97,11,28.5,11,27c0-7.168,5.832-13,13-13s13,5.832,13,13     c0,1.49-0.251,2.952-0.746,4.346c-0.186,0.52-0.76,0.789-1.277,0.607c-0.521-0.185-0.792-0.757-0.608-1.277     C34.788,29.498,35,28.262,35,27c0-6.065-4.935-11-11-11s-11,4.935-11,11c0,1.27,0.214,2.513,0.637,3.695     c0.186,0.521-0.085,1.093-0.605,1.278C12.92,32.014,12.807,32.032,12.695,32.032z"
  />
  <path d="M24,12c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S27.309,12,24,12z M24,2c-2.206,0-4,1.794-4,4s1.794,4,4,4     s4-1.794,4-4S26.206,2,24,2z" />
  <path d="M29,7H19c-0.552,0-1-0.447-1-1s0.448-1,1-1h10c-0.552,0-1,0.447-1,1S29.552,7,29,7z" />
  <path d="M24,16c-0.552,0-1-0.447-1-1v-4c0-0.553,0.448-1,1-1s1,0.447,1,1v-4C25,15.553,24.552,16,24,16z" />
</svg>

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

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

phpjavascriptjqueryhtmlajax

Are memory leaks a common issue with Angular directives?

Using a simple html file to replicate a memory leak: <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> <script> va ...

javascriptangularjsmemory-leaks

Issue: The content of the text does not align with the HTML generated by the server

I'm struggling with an algorithm in next.js and encountering hydration errors. Here is the code I am using: import numbers from "../../functions/numberGenerators.js" export default function test() { ...

javascriptreactjsnext.js

Does setInterval consume a significant amount of CPU resources?

Recently, I came across an article stating that setInterval is considered to be CPU intensive. To verify this claim, I developed a script utilizing setInterval and closely monitored the CPU usage. Surprisingly, I did not observe any significant changes in ...

javascriptajaxcpusetinterval

Transforming a string into an object

I've been working on this code where my aim is to convert a string into an object and then display the data from an ajax call. However, it appears that using the string value in this way is not functioning as expected. var string = "first: 'Geor ...

javascriptjqueryajaxstringobject

Guide to triggering an event when two distinct keys are pressed simultaneously (Using HTML5 and Javascript)

I'm looking to have my character jump whenever I press any key on the keyboard. Is there a method to achieve this using "case..." functions? Thanks! Jordan ...

javascripthtmlcanvashtml5-canvaskeyevent

Is there an issue with JQM plugin due to jQuery's append() function?

I am just starting to learn about jQuery mobile as I develop an app using it. Whenever I click on the Add_details button, I want to add dynamic input fields only once. After saving, if I click on the Add_details button again, I need to append more dynamic ...

javascriptjqueryhtmljquery-mobile

Exploring the possibilities of utilizing classes in testing scenarios with Vue, Cypress, and Cucumber

I am currently working on setting up e2e tests using Cypress and Cucumber for my project. The application is built with Vue CLI 4.1.1, and I have added the package cypress-cucumber-preprocessor (V1.19.0) via NPM. Update: After extensive research and tes ...

javascriptvue.jscucumbertddcypress

Formatting time on the x-axis in a Chart.js graph

I've been attempting to create a scatter plot with Chart.js using some data, but no matter what I try from various internet resources, the x-axis continues to display as integers instead of dates. Here's a screenshot for reference. UPDATE: I dis ...

javascriptchart.js

What is the best way to implement my Vanilla JS Array manipulation technique in a ReactJS environment?

My REST API development is in its final stages, and I'm currently facing a challenge with converting an array received from the backend into either a Nested Object of Objects or an array of objects. This conversion would allow me to avoid directly acc ...

javascriptarraysreactjs

assigning a numerical value to a variable

Is there a way to create a function for a text box that only allows users to input numbers? I want an alert message to pop up if someone enters anything other than a number. The alert should say "must add a number" or something similar. And the catch is, w ...

javascriptjqueryvariables

Injecting a service into an Angular constant is a straightforward process that involves

Is it possible to define a constant that utilizes the $locale service? Since constants are objects, injecting them as parameters like in controllers is not an option. How can this be achieved? angular.module('app').constant('SOME_CONSTANT&a ...

javascriptangularjsdependency-injectionconstantsangularjs-service

Javascript - Editing specific markers with varying titles from the url

My website contains checkboxes in the html code: <input onclick="markAsChanged(this); toggleApproveDeny(this);" name="2c9923914b887d47014c9b30b1bb37a1_approveChk" type="checkbox"> <input onclick="markAsChanged(this); toggleApproveDeny(this);" na ...

javascripthtmlurlcheckbox

The URL for the form action does not match the URL of the current page

Issue: I'm encountering an issue with a form where the form action URL is different from the page URL where the form is located. Page URL = www.page.com Form action = "" Problem: After submitting the form, it redirects to the form action URL inst ...

phpjavascriptjqueryajax

Position the caret after adding a new element in a content-editable div

I have a contenteditable div that contains various elements. My goal is to automatically create a new paragraph tag right after the element where the cursor is positioned when the user presses the enter key. Currently, I am able to insert the paragraph tag ...

javascriptjqueryhtmlfocuscontenteditable

The request for an advertisement was successful, however, no ad could be displayed as there was insufficient ad inventory available. Please handle the situation appropriately with the

Using react-native, I am trying to incorporate ads into my app but encountering an error. Despite attempting various solutions, nothing seems to work. It appears that the issue may lie with the AdMob Android SDK. While I have reviewed SDK videos related to ...

javascriptandroidreact-nativeadmob

Is it possible to send an ajax request within another ajax request?

I'm facing an issue with a php file that is sending an ajax request to another file located on a different domain name. The receiving parser then processes the information and sends it via ajax to yet another php file where the final action is carried ...

javascriptphpajax

Rewrite the nginx configuration to eliminate the "/index.html" part of the URL while preserving the query

My Nginx configuration specifies index index.html as the default index page. When accessing it as a progressive web app (using Angular), the URL loads as /index.html#/route instead of /#/route for some reason. I want to: Check if the URL contains ...

javascriptangularjs.htaccessnginx

Enhance your checkbox and radio components with React Higher Order Components (H

I'm in the process of designing my own custom checkbox and radio components to ensure reusability. This is what I have so far: import React, { Component } from 'react' export class Checkbox extends Component { render() { return ...

javascriptreactjsecmascript-6

Conflicts in routing between Node.js and AngularJS

Currently, my setup involves NodeJS, gulp, and Angular with ui-router. However, I have encountered an issue when configuring Angular to remove the tag (#) from the routes. The problem arises as Angular's routes do not seem to work properly, and the na ...

javascriptangularjsnode.jsexpressangular-ui-router