vivus.js - 如何通过 Class select SVG

Question

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

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

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

Answer 1

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 2

因为你可以有多个相同的元素 class

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

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

Answer 3

我以前没有用过这个库。虽然，我阅读了文档的来源。我认为您不能使用 classes。根据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

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

希望对您有所帮助！

vivus.js - 如何通过 Class select SVG

vivus.js - How to select SVG by Class

javascript

vivus