{"id":181,"date":"2015-10-07T13:16:05","date_gmt":"2015-10-07T04:16:05","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=181"},"modified":"2015-10-08T13:42:42","modified_gmt":"2015-10-08T04:42:42","slug":"avg_createelementns","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2015\/10\/avg_createelementns\/","title":{"rendered":"JavaScript\u3067HTML\u306eSVG\u8981\u7d20\uff08\u30bf\u30b0\uff09\u3092\u751f\u6210\u3059\u308b\u6642\u306fElementNS"},"content":{"rendered":"<p><!-- \u672c\u6587 --><br \/>\n\u901a\u5e38\u306eHTMLElement\u3068\u7570\u306a\u308a\u3001SVG\u306e\u8981\u7d20\u306fSVGElement\u3068\u3044\u3046\u3082\u306e\u306e\u305f\u3081document.createElement()\u3067\u306f\u306a\u304f<br \/>\n<b>Document.createElementNS\uff08\uff09<\/b>\u3092\u3064\u304b\u3063\u3066\u751f\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\ndocument.createElement()\u3067\u751f\u6210\u3057\u3066\u3057\u307e\u3063\u305f\u5834\u5408\u306b\u3064\u3044\u3066\u306f<a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/svg_createElementNS\/\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8<\/a>\u3092\u3054\u3089\u3093\u304f\u3060\u3055\u3044\u3002<br \/>\n<!--more--><br \/>\n\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\n\tvar svg_1 = document.getElementById(\"box_1\");\r\n\tvar svg_2 = document.getElementById(\"box_2\");\r\n\r\n\tvar Circle1 = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\");\r\n\tCircle1.setAttribute(\"cx\", 200);\r\n\tCircle1.setAttribute(\"cy\", 200);\r\n\tCircle1.setAttribute(\"r\", 50);\r\n\tCircle1.setAttribute(\"fill\", \"yellow\");\r\n\tsvg_1.appendChild(Circle1);\r\n\r\n\tvar Circle2 = document.createElement(\"circle\");\r\n\tCircle2.setAttribute(\"cx\", 200);\r\n\tCircle2.setAttribute(\"cy\", 200);\r\n\tCircle2.setAttribute(\"r\", 50);\r\n\tCircle2.setAttribute(\"fill\", \"yellow\");\r\n\tsvg_2.appendChild(Circle2);\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:100px;\r\n\theight:100px;\r\n}\r\n<\/style>\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"XHTML\" >\r\n<svg id=\"box_0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"0 0 400  400\">\r\n\t<rect x=\"10\" y=\"10\" width=\"380\" height=\"380\" fill=\"none\" stroke=\"green\" stroke-width=\"3\"\/>\r\n\t<circle  cx=\"100\" cy=\"100\" r=\"50\" fill=\"blue\"\/>\r\n\t<circle  cx=\"300\" cy=\"300\" r=\"50\" fill=\"red\"\/>\r\n<\/svg>\r\n<svg id=\"box_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"0 0 400  400\">\r\n\t<rect x=\"10\" y=\"10\" width=\"380\" height=\"380\" fill=\"none\" stroke=\"green\" stroke-width=\"3\"\/>\r\n\t<circle  cx=\"100\" cy=\"100\" r=\"50\" fill=\"blue\"\/>\r\n\t<circle  cx=\"300\" cy=\"300\" r=\"50\" fill=\"red\"\/>\r\n<\/svg>\r\n<svg id=\"box_2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"0 0 400  400\">\r\n\t<rect x=\"10\" y=\"10\" width=\"380\" height=\"380\" fill=\"none\" stroke=\"green\" stroke-width=\"3\"\/>\r\n\t<circle  cx=\"100\" cy=\"100\" r=\"50\" fill=\"blue\"\/>\r\n\t<circle  cx=\"300\" cy=\"300\" r=\"50\" fill=\"red\"\/>\r\n<\/svg>\r\n<\/pre>\n<p>\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001<br \/>\n\u300e<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/API\/Document\/createElementNS\">https:\/\/developer.mozilla.org\/<\/a>\u300f\u3055\u3093\u3067\u3059\u3002<br \/>\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/svg_createElementNS\/\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u901a\u5e38\u306eHTMLElement\u3068\u7570\u306a\u308a\u3001SVG\u306e\u8981\u7d20\u306fSVGElement\u3068\u3044\u3046\u3082\u306e\u306e\u305f\u3081document.createElement()\u3067\u306f\u306a\u304f Document.createElementNS\uff08\uff09\u3092\u3064\u304b\u3063\u3066\u751f\u6210\u3059\u308b\u5fc5\u8981 [&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\/181"}],"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=181"}],"version-history":[{"count":1,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/181\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}