{"id":271,"date":"2015-10-14T18:00:04","date_gmt":"2015-10-14T09:00:04","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=271"},"modified":"2015-10-14T17:40:01","modified_gmt":"2015-10-14T08:40:01","slug":"svg_transform_sp1","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2015\/10\/svg_transform_sp1\/","title":{"rendered":"JavaScript\u3067HTML5 SVG\u306ecircle\u3068rect\u3092\u56de\u8ee2\u3068\u62e1\u5927\u7e2e\u5c0f\u3059\u308b"},"content":{"rendered":"<p><!-- \u672c\u6587 --><\/p>\n<p>HTML5\u672c\u6587\u4e2d\u306b&lt;svg&gt;&lt;g&gt;&lt;rect&gt;&lt;circle&gt;\u3092\u8a18\u8ff0\u3057\u3001\u62bc\u3055\u308c\u305f\u30dc\u30bf\u30f3\u306b\u3088\u308aJavaScript\u3067\u51e6\u7406\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\nSVGTransform\u307e\u308f\u308a\u3092\u751f\u6210\u3057\u3001\u52b9\u679c\u3092\u6307\u5b9a\u3057\u3066\u3084\u308b\u3053\u3068\u3067\u56f3\u5f62\u3092\u5909\u5f62\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n&lt;svg&gt;\u30bf\u30b0\u3068&lt;g&gt;\u30bf\u30b0\u306e\u3069\u3061\u3089\u3092\u6307\u5b9a\u3057\u3066\u3084\u308b\u304b\u3092\u60a9\u3093\u3060\u306e\u3067\u66f8\u304d\u8a18\u3057\u3066\u304a\u304d\u307e\u3059\u3002\uff08\u9593\u9055\u3048\u308b\u3068\u3082\u3061\u308d\u3093\u601d\u3063\u305f\u3088\u3046\u306b\u306f\u52d5\u304d\u307e\u305b\u3093\uff09\uff09<\/p>\n<p>  <!--more--><\/p>\n<p>\u4e0b\u8a183\u3064\u306e\u547d\u4ee4\u3092\u4f7f\u3063\u3066\u3084\u308b\u3053\u3068\u3067\u3068\u308a\u3042\u3048\u305atransform\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<ul>\n<li>createSVGTransform()<\/li>\n<li>element.transform.baseVal.appendItem()<\/li>\n<li>Transform.setRotate()\u3000etc.<\/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\nvar SVG_1 = document.getElementById(\"box_1\");\r\nvar Group_1 = document.getElementById(\"g_1\");\r\nvar Transform = SVG_1.createSVGTransform();\r\n\r\nfunction Zoom(mag){\r\n\tGroup_1.transform.baseVal.appendItem(Transform);\r\n\tTransform.setScale(mag,mag);\r\n}\r\n\r\nfunction Rotate(){\r\n\tGroup_1.transform.baseVal.appendItem(Transform);\r\n\tTransform.setRotate(45, 0, 0);\r\n}\r\n<\/script>\r\n<\/pre>\n<p>\u25bcCSS<\/p>\n<pre class=\"lang:css decode:true \" title=\"CSS\" >\r\n<style>\r\nsvg{\r\n\twidth:300px;\r\n\theight:300px;\r\n}\r\n<\/style>\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"XHTML\" >\r\n<input id=\"button1\" type=\"button\" value=\"\u6642\u8a08\u56de\u308a\u306b45\u5ea6\u56de\u8ee2\" onClick=\"Rotate();\" \/>\r\n<input id=\"button2\" type=\"button\" value=\"\u5de6\u4e0a\u304b\u3089\u62e1\u5927\" onClick=\"Zoom(1.1);\" \/>\r\n<input id=\"button3\" type=\"button\" value=\"\u5de6\u4e0a\u3078\u306e\u7e2e\u5c0f\" onClick=\"Zoom(10\/11);\" \/>\r\n\r\n<div>\r\n<svg id=\"box_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"-50 -50 350 350\">\r\n    <g id=\"g_1\">\r\n        <rect id=\"rect_1\" height=\"200\" width=\"200\" x=\"0\" y=\"0\" fill=\"red\" \/>\r\n        <circle cx=\"0\" cy=\" 0\" r=\"10\" fill=\" blue\" \/>\r\n    <\/g>\r\n<\/svg>\r\n<\/div>\r\n<\/pre>\n<p><a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/svg_tranceform_sp1\/\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML5\u672c\u6587\u4e2d\u306b&lt;svg&gt;&lt;g&gt;&lt;rect&gt;&lt;circle&gt;\u3092\u8a18\u8ff0\u3057\u3001\u62bc\u3055\u308c\u305f\u30dc\u30bf\u30f3\u306b\u3088\u308aJavaScript\u3067\u51e6\u7406\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002 SVGTransform\u307e\u308f\u308a\u3092\u751f\u6210 [&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\/271"}],"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=271"}],"version-history":[{"count":2,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/271\/revisions\/300"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}