↓↓↓ クリックしてみてね ↓↓↓
SVG（Scalable Vector Graphics）要素を使用して、ウェブページ内に円を表示し、クリックごとに円の色が変化します。初めてクリックすると青に、次にクリックすると赤に、そして再びクリックすると青に戻ります。
HTML (index.html):
<!DOCTYPE html>: HTML5の文書型宣言を示します。
<html>: HTML文書のルート要素です。
<head>: ページのメタ情報や外部スタイルシート、スクリプトへのリンクを含むセクションです。
<title>: ページのタイトルを設定します。
<link rel="stylesheet" href="style.css">: 外部のスタイルシート（style.css）を読み込みます。
<body>: ページの本文部分で、ここにコンテンツが表示されます。
<svg>: Scalable Vector Graphics（SVG）を描画するためのコンテナ要素です。id属性が “mySvg” で、幅が300ピクセル、高さが200ピクセルで設定されています。
<script src="script.js"></script>: 外部のJavaScriptファイル（script.js）を読み込みます。
CSS (style.css):
#mySvg: idが “mySvg” のSVG要素に対してスタイルを適用します。
display: block;: SVG要素をブロックレベル要素として扱います。
margin: 0 auto;: SVG要素を水平方向に中央寄せに配置します。
JavaScript (script.js):
var svg = document.getElementById('mySvg');: HTMLからSVG要素を取得し、svg変数に格納します。
var svgWidth = svg.getAttribute('width');およびvar svgHeight = svg.getAttribute('height');: SVG要素の幅と高さを取得し、svgWidthおよびsvgHeight変数に格納します。
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');: createElementNSメソッドを使用して、新しいSVG要素である円（circle）を作成します。
circle.setAttribute('cx', svgWidth / 2);、circle.setAttribute('cy', svgHeight / 2);、circle.setAttribute('r', '50');、circle.setAttribute('fill', 'blue');: 円要素の属性を設定します。これにより、円がSVGの中央に描かれ、青色で塗りつぶされます。
svg.appendChild(circle);: 作成した円要素をSVGに追加し、表示します。
var isBlue = true;: 初期状態として、円の色を青に設定します。
circle.addEventListener('click', function() {...});: 円要素にクリックイベントリスナーを追加します。クリックすると、円の色が青と赤の間で切り替わるように制御されています。
コード
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg id="mySvg" width="300" height="200"></svg>
<script src="script.js"></script>
</body>
</html>
#mySvg {
display: block;
margin: 0 auto;
}
var svg = document.getElementById('mySvg');
var svgWidth = svg.getAttribute('width');
var svgHeight = svg.getAttribute('height');
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', svgWidth / 2);
circle.setAttribute('cy', svgHeight / 2);
circle.setAttribute('r', '50');
circle.setAttribute('fill', 'blue');
svg.appendChild(circle);
var isBlue = true;
circle.addEventListener('click', function() {
if (isBlue) {
circle.setAttribute('fill', 'red');
} else {
circle.setAttribute('fill', 'blue');
}
isBlue = !isBlue;
});
