{"id":1091,"date":"2018-04-13T15:15:09","date_gmt":"2018-04-13T14:15:09","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1091"},"modified":"2018-04-13T15:16:01","modified_gmt":"2018-04-13T14:16:01","slug":"snap-svg-requestanimationframe","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/snap-svg-requestanimationframe\/","title":{"rendered":"Snap SVG requestAnimationFrame"},"content":{"rendered":"<p><a href=\"https:\/\/jsfiddle.net\/607t26dn\/16\/\">https:\/\/jsfiddle.net\/607t26dn\/16\/<\/a><\/p>\n<pre class=\"lang:js decode:true \">var s = Snap(\"500px\", \"500px\");\r\ns.appendTo(document.body);\r\ns.attr({\r\n    viewBox: \"0 0 100 100\",\r\n    style: \"display: block;\"\r\n});\r\nvar header = s.rect(0, 0, 100, 100);\r\nheader.attr({\r\n    fill: \"white\",\r\n    stroke: \"green\"\r\n});\r\nvar verticalLine = s.line(50, 10, 50, 90).attr({id: \"vertical\", stroke: \"black\", strokeWidth: \"1px\"});\r\nvar horizontalLine = s.line(10, 50, 90, 50).attr({id: \"horizontal\", stroke: \"black\", strokeWidth: \"1px\"});\r\nvar circle = s.circle(50, 50, 10).attr({stroke: \"red\", fill: \"none\"});\r\nvar group = s.group(verticalLine);\r\ngroup.circle(50,50,1).attr({stroke: \"none\", fill: \"green\"});\r\n\r\nfunction animLoop(render, element) {\r\n    var then = Date.now();\r\n    function loop(now) {\r\n        var interval = now - then;\r\n        if (160 &lt;= interval || render(interval) !== false)\r\n            requestAnimationFrame(loop, element);\r\n        then = now;\r\n    }\r\n    loop(then);\r\n}\r\n\r\nvar deg = 0;\r\n function step(interval) {\r\n   deg += (0.03) * interval;\r\n   group.transform('r'+deg+',50,50');   \r\n };\r\nanimLoop(step, s);<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/jsfiddle.net\/607t26dn\/16\/ var s = Snap(&#8220;500px&#8221;, &#8220;500px&#8221;); s.appendTo(document.body); s.attr({ viewBox: &#8220;0 0 100 100&#8221;, style: &#8220;display: block;&#8221; }); var header = s.rect(0, 0, 100, 100); header.attr({ fill: &#8220;white&#8221;, stroke: &#8220;green&#8221; }); var verticalLine = s.line(50, 10, 50, 90).attr({id: &#8220;vertical&#8221;, stroke: &#8220;black&#8221;, strokeWidth: &#8220;1px&#8221;}); var horizontalLine = s.line(10, 50, 90, 50).attr({id: &#8220;horizontal&#8221;, stroke: &#8220;black&#8221;, strokeWidth: &#8220;1px&#8221;}); var [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1091","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1091"}],"version-history":[{"count":3,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1091\/revisions"}],"predecessor-version":[{"id":1094,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1091\/revisions\/1094"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}