vivus.js -如何按类选择SVG

Question

是否有办法按类选择SVG而不是ID，如下所示：

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

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

Answer 1

因为您可以使用同一个类拥有多个元素。

  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

我以前没用过这个库。虽然，我读了文档的来源。我觉得你不用上课。根据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');
  }
}

如果元素没有ID，它似乎会抛出错误。

参考资料：https://github.com/maxwellito/vivus/blob/master/src/vivus.js

我会尝试在这个答案之前实现一些东西，并尝试使它能够接受一个类。

希望这能有所帮助！