javascript - vivus.js - 如何按类选择 SVG

Question

有没有办法通过 Class 而不是 ID 选择 SVG，像这样：

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

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

Answer 1

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);
  }

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

我会尝试用这个答案之前的答案来实现一些东西，并尝试让它可以接受一个类。

希望这可以帮助！