- 締切済み
javascript htmlの追記について
いつもご教授いただきありがとうございます。 当方は全くの初心者ですので皆様にとっては質問するにあたいしないことかと存じますがよろしくお願い致します。 「javascriptを使用して選択した図形をSVGで描く」といったスクリプトをかきたいのですが、もちろん動きません。 自分でも「おかしい」というのはわかるのですが、かといってこんな数行のものを どう触ればいいのかと途方にくれております。 おそらくSVGへのｈｔｍｌを追記するところが問題だろうと思っております。 (…が、selectの値すらとれていない可能性もあります) よろしくお願い致します。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <!DOCTYPE html> <lamg="ja"> <charset="utf-8"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <script type="text/javascript"> function a(){ if(document.getElementById("sentaku")){ id=document.getElementById("sentaku").value; if(id=="circle"){ $("#svg").html('<circle cx="60px" cy="60px" r="50px" fill="red" stroke="blue" stroke-width="2px" />') } else if(id =="rect"){ $("#svg").html('<rect x="100px" y="100px" width="50px" height="50px" fill="blue" stroke="red" stroke-width="2px" />') } } } </script> <body> <form method="post" action=""> <select id="sentaku" name="zukei"> <option value="circle">円 </option> <option value="rect">四角 </option> </select> <input type="submit" value="表示" onclick="a()" > </form> <h3>この下に表示</h3> <svg width="250px" height="250px" xmlns="http://www.w3.org/2000/svg" id="svg"></svg> </body> </html>
- sheyma
- お礼率91% (21/23)
- JavaScript
- 回答数1
- ありがとう数14
- みんなの回答 （1）
- 専門家の回答
みんなの回答
select の値を取得するところはあっていますが、それ以外が いろいろ間違っています。とりあえず、円を描くほうだけ修正 方法を紹介します。 1. <svn> 要素にIDを付ける必要があります。 × <svg width="250px" height="250px" (以下省略) ○ <svg id="svg" width="250px" height="250px" (以下省略) 2. 円を描く方法に jQuery を使っていますが、svn は jQuery で 操作できません。円の描き方はこうです。 var figure = document.createElementNS("http://www.w3.org/2000/svg", "circle"); figure.setAttribute('cx', '60px'); figure.setAttribute('cy', '60px'); figure.setAttribute('r', '50px'); figure.setAttribute('fill', 'red'); figure.setAttribute('stroke', 'blue'); figure.setAttribute('stroke-width', '2px'); document.getElementById("svg").appendChild(figure); 3. ボタンは submit で作ると描画後に消されてしまいます。 × <input type="submit" value="表示" (以下省略) ○ <input type="button" value="表示" (以下省略)
