結果を表示する
元にもどす
◀︎
▶︎
<html lang="ja"><meta charset="utf-8"> <style> svg{width:100px; height:100px; border:1px solid green;} </style> <button id="生成する">図形を生成</button> <div id="表示"></div> <script> document.getElementById("生成する").addEventListener("click",function() {let svgElement=document.createElementNS("http://www.w3.org/2000/svg","svg"); let 円=document.createElementNS("http://www.w3.org/2000/svg","circle"); 円.setAttribute("cx","50"); 円.setAttribute("cy","50"); 円.setAttribute("r","30"); 円.setAttribute("fill","green"); svgElement.appendChild(円); document.getElementById("表示").appendChild(svgElement);}); </script> <p style="margin:40px;font-size:1.2em;color:#456789;">----- この記述は「動的生成」ですか？ -----</p> <p>答: この記述は JavaScript の「動的生成」です.</p> <p>ボタン・クリックでSVGを動的に生成している.</p> </html>