{"id":190,"date":"2015-10-08T11:00:02","date_gmt":"2015-10-08T02:00:02","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=190"},"modified":"2015-10-08T13:42:25","modified_gmt":"2015-10-08T04:42:25","slug":"svg_removechild","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2015\/10\/svg_removechild\/","title":{"rendered":"JavaScript\u3067 HTML5 SVG \u306ecircle\u4e0a\u306b\u7b49\u9593\u9694\u3067\u70b9\u63cf\u3092\u3059\u308b"},"content":{"rendered":"<p>\u4eca\u56de\u306f\u3001<a href=\"http:\/\/www.takaya-com.jp\/archives\/2015\/10\/avg_createelementns\/\">JavaScript\u3067SVGElement<\/a>\u306e\u751f\u6210\u306b\u52a0\u3048\u3001\u524a\u9664\u3082\u3057\u3066\u307f\u307e\u3057\u305f\u3002svg\u30bf\u30b0\u4ee5\u4e0b\u306e\u5b50\u30ce\u30fc\u30c9\u3092\u3001for\u6587\u3092\u3064\u304b\u3063\u3066\u3059\u3079\u3066\u3092\u524a\u9664\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u70b9\u63cf\u3059\u308b\u5ea7\u6a19\u3092\u6c42\u3081\u308b\u305f\u3081\u306e\u57fa\u672c\u7684\u306a\u8a08\u7b97\u5f0f\u3082\u308f\u304b\u308a\u3084\u3059\u304f\uff08\u5197\u9577\u306b\uff09\u66f8\u304d\u8a18\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>  <!--more--><\/p>\n<ul>\n<li>360\u5ea6\u6570\u6cd5\u304b\u3089\u30e9\u30b8\u30a2\u30f3\u3078\u306e\u5909\u63db<\/li>\n<li>\u30e9\u30b8\u30a2\u30f3\u304b\u3089sin\u3001cos\u3092\u8a08\u7b97<\/li>\n<\/ul>\n<p>\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<p>\u25bcJavaScript<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\" >\r\n<script>\r\nwindow.onload = function () {\r\n\tdrawUpdate();\r\n};\r\n\r\nfunction drawUpdate(){\r\n\tvar svg_1 = document.getElementById(\"box_1\");\r\n\tvar cNode = document.getElementById(\"box_1\");\r\n\r\n\tvar choice = document.getElementById('selectA');\r\n\tvar options = document.getElementById('selectA').options;\r\n\tvar polygon_num = options.item(choice.selectedIndex).value;\r\n\r\n\/\/\t\u5b50\u30ce\u30fc\u30c9\u306e\u6570\u3060\u3051for\u3067\u30eb\u30fc\u30d7\u3057\u3066\u3059\u3079\u3066remove\r\n\tfor (var i =svg_1.childNodes.length-1; i>=0; i--) {\r\n\tsvg_1.removeChild(svg_1.childNodes[i]);\r\n\t}\r\n\r\n\t\r\n\/\/\t\u57fa\u6e96\u3068\u306a\u308b\u5186\u306e\u4e2d\u5fc3 Center Of the Circle \u3068\u305d\u306e\u534a\u5f84\r\n\tvar coc_x = 200;\r\n\tvar coc_y = 200;\r\n\tvar coc_r = 150;\r\n\r\nvar Circle0 = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\");\r\nCircle0.setAttribute(\"cx\", coc_x);\r\nCircle0.setAttribute(\"cy\", coc_y);\r\nCircle0.setAttribute(\"r\", coc_r);\r\nCircle0.setAttribute(\"stroke\", \"blue\");\r\nCircle0.setAttribute(\"fill\", \"none\");\r\nsvg_1.appendChild(Circle0);\r\n\r\n\/\/\t\u70b9\u63cf\u3059\u308b\u5186\u306e\u534a\u5f84\r\n\tvar r = 8;\r\n\r\n\/\/\t\u9078\u629e\u3055\u308c\u305f\u89d2\u6570\u304b\u3089\u89d21\u3064\u3042\u305f\u308a\u306e\u89d2\u5ea6\u3092360\u5ea6\u6570\u6cd5\u3067\u8a08\u7b97\r\n\tvar angle360 = 360 \/ polygon_num ;\r\n\r\n\/\/\tfor\u3067\u30eb\u30fc\u30d7\u3057\u30661\u3064\u305a\u3064\u70b9\u63cf\r\n\tfor( i = 0 ; i < polygon_num ; i++ ){\r\n\t\tradian = (angle360*i) * Math.PI \/ 180;\r\n\t\tcos_A = Math.cos(radian);\r\n\t\tsin_A = Math.sin(radian);\r\n\r\n\/\/\t\u5c0e\u304b\u308c\u305f\u30b5\u30a4\u30f3\u3001\u30b3\u30b5\u30a4\u30f3\u306b\u57fa\u6e96\u5186\u306e\u534a\u5f84\u3092\u304b\u3051\u3066\u5ea7\u6a19\u3092\u6c42\u3081\u308b\r\n\t\tcx = cos_A * coc_r + coc_x;\r\n\t\tcy = sin_A * coc_r + coc_y;\r\n\r\n\t\tvar Circle1 = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\");\r\n\t\tCircle1.setAttribute(\"cx\", cx);\r\n\t\tCircle1.setAttribute(\"cy\", cy);\r\n\t\tCircle1.setAttribute(\"r\", r);\r\n\t\tCircle1.setAttribute(\"fill\", \"pink\");\r\n\t\tCircle1.setAttribute(\"class\", \"dotted\");\r\n\t\tsvg_1.appendChild(Circle1);\r\n\t}\r\n}\r\n<\/script>\r\n<\/pre>\n<p>\u25bcCSS<\/p>\n<pre class=\"lang:css decode:true \" title=\"CSS\" >\r\n<style type=\"text\/css\">\r\nsvg{\r\n\twidth:250px;\r\n\theight:250px;\r\n}\r\n<\/style>\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"XHTML\" >\r\n<form id=\"form1\"><span>\u6b63<\/span>\r\n<select id=\"selectA\" onChange=\"drawUpdate();\">\r\n\t\t\t\t<option value=\"3\" selected=\"selected\">3<\/option>\r\n\t\t\t\t<option value=\"4\">4<\/option>\r\n\t\t\t\t<option value=\"5\">5<\/option>\r\n\t\t\t\t<option value=\"6\">6<\/option>\r\n\t\t\t\t<option value=\"12\">12<\/option>\r\n  <\/select><span>\u89d2\u5f62<\/span>\r\n<\/form>\r\n<svg id=\"box_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"0 0 400  400\">\r\n<\/svg>\r\n<\/pre>\n<p><a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/svg_removeChild\/\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306f\u3001JavaScript\u3067SVGElement\u306e\u751f\u6210\u306b\u52a0\u3048\u3001\u524a\u9664\u3082\u3057\u3066\u307f\u307e\u3057\u305f\u3002svg\u30bf\u30b0\u4ee5\u4e0b\u306e\u5b50\u30ce\u30fc\u30c9\u3092\u3001for\u6587\u3092\u3064\u304b\u3063\u3066\u3059\u3079\u3066\u3092\u524a\u9664\u3057\u3066\u3044\u307e\u3059\u3002 \u70b9\u63cf\u3059\u308b\u5ea7\u6a19\u3092\u6c42\u3081\u308b\u305f\u3081\u306e\u57fa\u672c\u7684\u306a\u8a08\u7b97\u5f0f\u3082\u308f\u304b\u308a\u3084\u3059\u304f\uff08\u5197\u9577\u306b\uff09 [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,3],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/190"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":4,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":196,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/190\/revisions\/196"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}