vivus.js - Comment sélectionner SVG par classe

Question

Est-il possible de sélectionner SVG par classe au lieu d'ID, comme ceci:

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

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

Answer 1

Puisque vous pouvez avoir plusieurs éléments avec la même classe

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

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

Answer 2

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 

Answer 3

Je n'ai pas utilisé cette lib avant. Bien que, j'ai lu la source de la documentation. Je ne pense pas que tu puisses utiliser des cours. Selon le code source de 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'); 
    } 
} 

Il semble qu'il y aura une erreur si l'élément n'a pas d'ID.

Référence: https://github.com/maxwellito/vivus/blob/master/src/vivus.js

Je voudrais essayer de mettre en œuvre quelque chose avec la réponse avant celui-ci et essayer de le faire où il peut accepter une classe.

Espérons que cela aide!