{"id":227,"date":"2016-08-27T11:50:24","date_gmt":"2016-08-27T03:50:24","guid":{"rendered":"http:\/\/loveuhouse.cn\/wordpress\/?p=227"},"modified":"2016-08-27T11:50:24","modified_gmt":"2016-08-27T03:50:24","slug":"svg-%e5%9b%be%e8%a1%a8-%e5%9c%86%e7%8e%af","status":"publish","type":"post","link":"https:\/\/loveuhouse.cn\/wordpress\/?p=227","title":{"rendered":"svg \u56fe\u8868-\u5706\u73af"},"content":{"rendered":"<blockquote><p>css<\/p><\/blockquote>\n<pre class=\"lang:default decode:true\">.chart-circle-bg{\n\tfill:none ;\n\tstroke:#E4EAF5 ;\n\tstroke-width:10;\n\tstroke-miterlimit:10;\n\tcx:100;\n\tcy:100;\n\tr:55.056;\n\t\t    \n}\n.chart-circle-line{\n\tfill:none;\n\tstroke-linecap: round;\n\tanimation: spin 4s infinite linear;\n\tstroke-width:10;\n\tstroke-miterlimit:10;\n}<\/pre>\n<blockquote><p>js<\/p><\/blockquote>\n<pre class=\"lang:default decode:true\">&lt;script&gt;\n$('input').bind('input propertychange', the_change);\n\nfunction the_change(){\n\tvar it = $(this);\n\tvar css=($(this).attr(\"class\"));\n\tvar target=$(\".chart-circle-line\");\n\tvar js_target=document.getElementsByClassName(\"chart-circle-line\")[0].getBoundingClientRect();\n\tvar h=js_target.height||Bottom - Top;\n\tvar w=js_target.width||Right - Left;\n\tswitch (css){\n\tcase \"ray\":\n\t\ttarget.css(\"stroke-dasharray\",it.val()\/100*h*Math.PI+\" \"+it.val()\/100*w*Math.PI)\n\t\tbreak;\n\tcase \"set\":\n\t\ttarget.css(\"stroke-dashoffset\",it.val()\/100*h*Math.PI)\n\t\tbreak;\n\t}\n}\n&lt;\/script&gt;<\/pre>\n<blockquote><p>html<\/p><\/blockquote>\n<pre class=\"lang:default decode:true \">&lt;svg class=\"f3\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" x=\"0px\" y=\"0px\" width=\"200px\" height=\"200px\" viewBox=\"0 0 200 200\" enable-background=\"new 0 0 200 200\" xml:space=\"preserve\"&gt;\n&lt;g &gt;\n\t&lt;circle class=\"chart-circle-bg\" \/&gt;\n&lt;\/g&gt;\n&lt;defs class=\"\"&gt;\n\t\t&lt;linearGradient id=\"orange_red\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\"&gt;\n\t\t&lt;stop offset=\"0%\" style=\"stop-color:#FF675C;stop-opacity:1\"\/&gt;\n\t\t&lt;stop offset=\"100%\" style=\"stop-color:#FF325C;stop-opacity:1\"\/&gt;\n\t\t&lt;\/linearGradient&gt;\n\t&lt;\/defs&gt;\n&lt;g &gt;\n\t&lt;path class=\"chart-circle-line\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  \n\tstroke=\"url(#orange_red)\" \t\n\td=\"M100,44.944c30.407,0,55.056,24.649,55.056,55.056   c0,30.406-24.648,55.057-55.056,55.057c-30.406,0-55.056-24.65-55.056-55.057C44.944,69.593,69.594,44.944,100,44.944\"\n\t\/&gt;\n&lt;\/g&gt;\n&lt;\/svg&gt;\n&lt;input class='ray' &gt;\n&lt;input class='set' &gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>css .chart-circle-bg{ fill:none ; stroke:#E4EAF5 ; stro &hellip; <a href=\"https:\/\/loveuhouse.cn\/wordpress\/?p=227\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">svg \u56fe\u8868-\u5706\u73af<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,4,2],"tags":[],"_links":{"self":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/227"}],"collection":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=227"}],"version-history":[{"count":1,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/227\/revisions\/228"}],"wp:attachment":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}