.pie_chart{ transform:rotate(-90deg);/*頂点から始まるように調整*/ } circle{ fill:transparent;/*塗り*/ stroke-width:100;/*線の幅*/ } function circle() { var css, rules, value, fadeout; // styleタグを作成 css = document.createElement('style'); css.media = 'screen'; css.type = 'text/css'; var i = 1; const list = document.querySelectorAll('svg'); var arrayList = [].slice.call(list); arrayList.forEach(function (val, index, array) { // パーセントの計算 var num = val.dataset.num * 12.56; value = '@keyframes circle' + i + '{' + [ '0%{stroke-dasharray:0 1256;stroke: black}', '100%{stroke-dasharray:' + num + ' 1256;stroke: black}' ].join(' ') + '}'; // ルールをstyleタグに追加 rules = document.createTextNode([value].join('\n')); css.appendChild(rules); i++; }); // head内に作成 document.getElementsByTagName('head')[0].appendChild(css); } circle();
【javascript,css】svgで複数の円グラフアニメーション
2020/03/24