いつもご教授いただきありがとうございます。
当方は全くの初心者ですので皆様にとっては質問するにあたいしないことかと存じますがよろしくお願い致します。
「javascriptを使用して選択した図形をSVGで描く」といったスクリプトをかきたいのですが、もちろん動きません。
自分でも「おかしい」というのはわかるのですが、かといってこんな数行のものを
どう触ればいいのかと途方にくれております。
おそらくSVGへのhtmlを追記するところが問題だろうと思っております。
(…が、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>
No.3ベストアンサー
- 回答日時:
No.2 を少し単純にしました
<!DOCTYPE html>
<html lang=ja>
<meta charset=utf-8>
<script>
function replaceShape(svg, name, atr) {
// 名前空間付きの要素として生成しなければSVGは機能しない
var node = document.createElementNS('http://www.w3.org/2000/svg', name);
var pen = {fill:'red', stroke:'blue', 'stroke-width':'2px'}; // よく使う属性値
for (var i in pen) node.setAttribute(i, pen[i]); // よく使う属性値をあらかじめ設定
for (var i in atr) node.setAttribute(i, atr[i]);
while (svg.firstChild) svg.removeChild(svg.firstChild); // <svg>以下を全て削除
svg.appendChild(node);
}
function drawToSVG(svg, form) {
var z = form.elements['zukei'].value;
if (z == 'circle') replaceShape(svg, 'circle', {cx:'60px', cy:'60px', r:'50px'});
if (z == 'rect') replaceShape(svg, 'rect', {x:'100px', y:'100px', width:'50px', height:'50px'});
}
window.addEventListener('submit', function(ev) { // ページ内で発生したsubmitイベント
var form = ev.target;
if (form && form.name == 'controlpanel') { // 目的のformの場合
ev.preventDefault(); // submit を中断
drawToSVG(document.getElementById('svg'), form); // 代わりに図形描画
}
}, false);
</script>
<form name="controlpanel">
<select name="zukei">
<option value="circle">円
<option value="rect">四角
</select>
<button type="submit">表示</button>
</form>
<h3>この下に表示</h3>
<svg width="250px" height="250px" xmlns="http://www.w3.org/2000/svg" id="svg"></svg>
毎日PC触れる環境ではないためお礼が遅くなり申し訳ありませんでした!!
この初心者に詳しくご説明してくだりありがとうございます。
これなら理解できました。
同じ動作をさせるにしてもやり方がいろいろありどれが最適が(負担が少なかったり、干渉がなかったりなど)まだまだお勉強していかなければならないと思いました。
ありがとうございました。
No.2
- 回答日時:
稼動するサンプル、ちょっとアレンジ
<!DOCTYPE html>
<html lang=ja>
<meta charset=utf-8>
<script>(function(){
function drawToSVG(svg, form){
function P(name) {return document.createElementNS('http://www.w3.org/2000/svg', name)}
function R(dst, src) {if(src) for (var i in src) dst.setAttribute(i, src[i]); return dst}
function E(name, _) {var e=P(name); for (var i=1; i<arguments.length; i++) R(e, arguments[i]); return e}
function C(elem) {while (elem.firstChild) elem.removeChild(elem.firstChild); return elem}
function A(elem, _) {for (var i=1; i<arguments.length; i++) elem.appendChild(arguments[i]); return elem}
var z = form.elements['zukei'].value;
var pen = {fill:'red', stroke:'blue', 'stroke-width':'2px'}; // よく使う属性値を事前定義
if (z == 'circle') A(C(svg), E('circle', pen, {cx:'60px', cy:'60px', r:'50px'}));
if (z == 'rect') A(C(svg), E('rect', pen, {x:'100px', y:'100px', width:'50px', height:'50px'}));
}
window.addEventListener('submit', function(ev){
if (ev.target && ev.target.name == 'controlpanel') { // 目的のformの場合
ev.preventDefault(); // submit を中断
drawToSVG(document.getElementById('svg'), ev.target);
}
}, false);
})()</script>
<form name="controlpanel">
<select name="zukei">
<option value="circle">円
<option value="rect">四角
</select>
<button type="submit">表示</button>
</form>
<h3>この下に表示</h3>
<svg width="250px" height="250px" xmlns="http://www.w3.org/2000/svg" id="svg"></svg>
理解をこえております~~(T.T)
Rとiがargumentsまで増えていく???arguments[i]???
var z以下は解かりますがそのうえのスクリプトを
もう少し調べて考えてから読み解こうと思います。
ありがとうございました。
No.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="表示" (以下省略)
お返事が遅くなりもうしわけありませんでした!!
PCが使える時間とこちらのメンテが重なり…。
初心者の私でもわかりやすくご教授くださりありがとうございました。
これまでsubmitとbuttonの違いがあいまいでした。
javaで図形を描く方法もお勉強になりました。
いつかものになると信じて妊娠を機にタグうちからお勉強しはじめ子供はもう歩いています…。奥が深いですね。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで複数の表示・非表...
-
formのsubmitを押すとモーダル...
-
3重のクォーテーション
-
「ご処理進めて頂きますようお...
-
VBAでループ内で使う変数名を可...
-
Excelシート上のマクロを登録し...
-
エクセルで、日付を入力すると...
-
UPS警告音を止めたい
-
メルカリのメルカードで買い物...
-
CloseとDisposeの違い
-
VBAにてメッセージボックスを最...
-
アクセスVBAのMe!と[ ]
-
Accessでフォームから別フォー...
-
ユーザーフォームをショートカ...
-
EXCEL VBA マクロ 実行する度に...
-
Excel VBA マクロ実行中のみテンキ...
-
UWSC画像認識で座標の位置がず...
-
エクセルVBAで、MsgBox やInput...
-
UMLでの例外処理
-
VBA シート毎に画像挿入
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSでreadonlyの機能はあり...
-
確認ダイアログを次からは表示...
-
formのsubmitを押すとモーダル...
-
折りたたみを全て開いて別ペー...
-
改行をしたいが、<br>と...
-
javascriptでの(-)ハイフンの処...
-
iframe内のスクリプトを親から3...
-
jqueryを使ったスムーススクロ...
-
特定の条件のHTML要素を一括で...
-
動画の上に広告をオーバーレイ...
-
GoogleストリートビューAPIでイ...
-
時間帯によってclass名を変更し...
-
ブログパーツをレスポンシブ化...
-
JavascriptでXSSの脆弱性への対...
-
jqueryアコーディオンの上部の...
-
Q&A掲示板の入力フォームに文字...
-
クリックすると、色が変わるよ...
-
【JavaScript】検索がヒットし...
-
JavascriptのHTMLクラス表示に...
-
JSライブラリ、DojoのEditorの...
おすすめ情報