snap.svgを使って、同じclass名の描画が一つしかされない

いつもお世話になっております。
現在、snap.svgを使ってsvgの描画をしています。
http://snapsvg.io/

#問題点
snap.svgにて、同じクラス名が複数あった場合に一つだけしか描画してくれない問題にあたりました。
snap.svgを使用して、指定したクラス名の数だけsvgを描画したいです。

■HTML


<body>
<svg class="hoge" style="width:100;height:100;"></svg>
<svg class="hoge" style="width:100;height:100;"></svg>
</body>

■JS

import Snap from 'snapsvg';
$(window).on('load', function() {

Snap(".hoge").circle(30, 30, 30).attr({fill:"#F00"});

});

上記のように書いた場合、一番最初の'.hoge'だけsvgが描画され
二番目の'.hoge'は空の状態になってしまいます。

#知りたいこと
同じクラス名が複数あった場合、その存在する数だけ描画してほしいです。
クラス名を変えて処理する方法もありますが、複数同じデザインのボタンが
あった場合にわざわざクラス名を変えるのは現実的ではないと思います。

なにか良い方法はありますでしょうか。
宜しくお願いいたします。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問