質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

324閲覧

SVGを使用してアニメーション付きの円グラフを作成したい

a1291

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/08/15 12:03

https://qiita.com/melo15/items/6cc3c24e448a8fb8492c

このような背景の色がないものは多数見かけるのですが、背景に色が元々ついていてその上から色を上書きしていく
...ようなものを作成したいと思っております。現在は、色がついていなく黒色がグラフの色を示しております。

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116 116" style=""><path d="M 3, 58 A 55 55 0 1 0 113 58 A 55 55 0 1 0 3 58"/>

CSS

svg { transform: rotate(90deg); } path { fill: transparent; stroke: #000; stroke-width: 3; animation: circleAnimation 6.5s infinite; } @keyframes circleAnimation { 0% { stroke-dasharray: 0 365; } 99.9%,to { stroke-dasharray: 366 365; } }

ご教授いただけると助かります。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/08/15 12:20

仕様があいまいです。もう少しきちんと説明してください
guest

回答1

0

一応なにもないと検証のしようがないのでサンプルあげておきます
これをベースに何をどうしたいか明示されるといいでしょう

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 btn.addEventListener('click',()=>{ 4 let num=0; 5 let timerID=setInterval(()=>{ 6 draw(num); 7 num++; 8 if(num>Number(n.value)) clearInterval(timerID); 9 }); 10 }); 11 const draw=per=>{ 12 const stroke_color="orange"; 13 const text_color="orange"; 14 const base_color="gold"; 15 const radian=180/Math.PI; 16 const cx=100; 17 const cy=100; 18 const r=80; 19 const S=-90; 20 let E=S; 21 22 const p1=document.querySelector('#p1'); 23 const t1=[["x",cx],["y",cy]].reduce((x,y)=>(x.setAttribute(y[0],y[1]),x),document.querySelector('#t1')); 24 const speed1=10; // bigger is faster 25 const speed2=1; // smaller is faster 26 p1.setAttribute('stroke',stroke_color); 27 p2.setAttribute('fill',base_color); 28 t1.setAttribute('fill',text_color); 29 if(per>=100){ 30 E=269.99; 31 per=100; 32 }else{ 33 E=per/100*360+S; 34 } 35 console.log(E); 36 let f1=(E-S)<=180?0:1; 37 let x1=cx+r*Math.cos(S/radian); 38 let y1=cy+r*Math.sin(S/radian); 39 let x2=cx+r*Math.cos(E/radian); 40 let y2=cy+r*Math.sin(E/radian); 41 let dx=x2-x1; 42 let dy=y2-y1; 43 let d1=`M ${x1},${y1} a ${r} ${r} ${S} ${f1} 1 ${dx},${dy} `; 44 let d2=d1+`L ${cx},${cy}`; 45 p2.setAttribute('d',d2); 46 p1.setAttribute('d',d1); 47 t1.textContent=per; 48 } 49}); 50 51</script> 52<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 53<path id="p2" d="" fill="none" /> 54<path id="p1" d="" fill="none" stroke-width="3" /> 55<text id="t1" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="black" font-size="20px" ></text> 56</svg> 57<hr> 58<input type="number" step="1" id="n" value="0" min="0" max="100"> 59<input type="button" value="view" id="btn">

投稿2022/08/15 12:38

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問