vivus.js - 如何按类选择 SVG答案

【问题标题】：vivus.js - How to select SVG by Classvivus.js - 如何按类选择 SVG
【发布时间】：2016-09-22 08:43:48
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript vivus

【解决方案1】：

因为你可以拥有多个具有相同类的元素

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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

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

希望这会有所帮助！

【讨论】：

谢谢！我不明白如何绕过 'Object' ，这个 answer 完美运行，我想！看到这个demo。再次感谢您的宝贵时间！