javascript htmlの追記について

解決済

質問者：sheyma
質問日時：2015/01/23 23:51
回答数：3件

いつもご教授いただきありがとうございます。
当方は全くの初心者ですので皆様にとっては質問するにあたいしないことかと存じますがよろしくお願い致します。

「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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Ogre7077
回答日時：2015/01/31 13:12

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>

- 0
- 件

通報する

この回答へのお礼

毎日PC触れる環境ではないためお礼が遅くなり申し訳ありませんでした！！
この初心者に詳しくご説明してくだりありがとうございます。
これなら理解できました。
同じ動作をさせるにしてもやり方がいろいろありどれが最適が（負担が少なかったり、干渉がなかったりなど）まだまだお勉強していかなければならないと思いました。
ありがとうございました。

通報する

お礼日時：2015/02/05 00:44

参考程度に

No.2

回答者： Ogre7077
回答日時：2015/01/29 17:34

稼動するサンプル、ちょっとアレンジ

<!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>

- 0
- 件

通報する

この回答へのお礼

理解をこえております～～（T.T)
Rとiがargumentsまで増えていく？？？arguments[i]？？？
var z以下は解かりますがそのうえのスクリプトを
もう少し調べて考えてから読み解こうと思います。
ありがとうございました。

通報する

お礼日時：2015/01/29 22:33

No.1

回答者： shitaba
回答日時：2015/01/24 15:32

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="表示" (以下省略)

- 0
- 件

通報する

この回答へのお礼

お返事が遅くなりもうしわけありませんでした！！
PCが使える時間とこちらのメンテが重なり…。

初心者の私でもわかりやすくご教授くださりありがとうございました。
これまでsubmitとbuttonの違いがあいまいでした。
javaで図形を描く方法もお勉強になりました。

いつかものになると信じて妊娠を機にタグうちからお勉強しはじめ子供はもう歩いています…。奥が深いですね。
ありがとうございました。

通報する

お礼日時：2015/01/29 22:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！