vivus.js - How to select SVG by Class

Question

Is there a way to select SVG by Class instead of ID , Like this:

<svg class="mySVG">
    <path...>
    <path...>
    <path...>
</svg>

<script>
    new Vivus('.mySVG', {duration: 200}, myCallback);
</script>

score 2 · Accepted Answer · answered Jun 10 '16 at 16:10

2

Since you can have multiple elements with same class

  var els= document.getElementsByClassName("mySVG");

  for (var i = els.length - 1; i >= 0; i--) {
    new Vivus(els[i], {duration: 200}, myCallback);
  }

answered Jun 10 '16 at 16:10

emrhzc

1,347
11
19

score 0 · Answer 2 · answered Jun 10 '16 at 16:09

document.getElementsByClassName('class_name');
document.querySelector('.class_name');
document.querySelectorAll('.class_name')[0];
// if that's the first SVG element with the given class that you're interested in.
// otherwise just loop through the HTMLCollection it returns

score 0 · Answer 3 · answered Jun 10 '16 at 16:23

I haven't used this lib before. Although, I read the source of the documentation. I don't think you can use classes. According to the source code of vivus.js.

* Check and set the element in the instance
* The method will not return anything, but will throw an
* error if the parameter is invalid
*
* @param {DOM|String}   element  SVG Dom element or id of it
*/
Vivus.prototype.setElement = function (element, options) {
// Basic check
if (typeof element === 'undefined') {
throw new Error('Vivus [constructor]: "element" parameter is required');
}

// Set the element
if (element.constructor === String) {
element = document.getElementById(element);
if (!element) {
  throw new Error('Vivus [constructor]: "element" parameter is not related       to an existing ID');
  }
}

It seems like it will throw a error if the element doesn't have a ID.

Reference: https://github.com/maxwellito/vivus/blob/master/src/vivus.js

I would try to implement something with the answer before this one and try to make it where it can accept a class.

Hope this helps!

thanks! I didn't understand how to bypass ['Object'](https://github.com/maxwellito/vivus#constructor) , this [answer](http://stackoverflow.com/a/37752761/5688267) works perfectly, i think! see this [demo](http://codepen.io/anon/pen/BzjqaP) . thanks again for your time! — smalinux, Jun 10 '16 at 18:40

vivus.js - How to select SVG by Class

3 Answers3