{"id":2257,"date":"2018-10-31T21:47:36","date_gmt":"2018-10-31T12:47:36","guid":{"rendered":"https:\/\/uda2.com\/blog\/?p=2257"},"modified":"2018-10-31T21:47:36","modified_gmt":"2018-10-31T12:47:36","slug":"svg_line_animatiion","status":"publish","type":"post","link":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/","title":{"rendered":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3"},"content":{"rendered":"<p>\u4e00\u822c\u7684\u306b\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306fCSS\u306eborder\u3092\u4f7f\u3046\u3002<br \/>\nCSS\u3060\u3051\u3067\u5b8c\u7d50\u3059\u308b\u306e\u3067\u898b\u3084\u3059\u304f\u4fbf\u5229\u3060\u304c\u3001\u89d2\u4e38\u30672\u70b9\u304b\u3089\u56f2\u3046\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308d\u3046\u3068\u601d\u3063\u305f\u3089CSS\u3067\u306f\u96e3\u3057\u305d\u3046\u306a\u306e\u3067SVG\u3067\u3084\u3063\u3066\u307f\u305f\u3002<br \/>\n<!--more--><\/p>\n<div style=\"width:70px; margin:0 auto;\"><a href=\"#\" class=\"anirect\">\u30b5\u30f3\u30d7\u30eb<\/a><\/div>\n<style>a.anirect {\n\tcolor:#FFF;\n\ttext-decoration: none;\n\tpadding: 5px;\n\tfont-size: 12px;\n\tdisplay: block;\n\tposition: relative;\n\ttext-align:center;\n}\na.anirect svg {\n\tposition: absolute;\n\ttop: 0;left: 0;\n\tdisplay:block;\n\tpointer-events: none;\n}\na.anirect svg rect {\n\tfill:none;\n\tstroke:#FFF;\n\tstroke-dasharray: 0 98;\n\tstroke-dashoffset: -40;\n\tstroke-width: 1;\n\ttransition: stroke-dasharray 500ms 0s ease;\n}\na.anirect:hover svg rect {\n\tstroke-dasharray: 98 0;\n}<\/style>\n<p><script>\nvar navs = document.body.querySelectorAll('a.anirect');\nnavs.forEach(function(nav) {\n  var rect = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\n  rect.setAttribute(\"x\", \"0.5\");\n  rect.setAttribute(\"y\", \"0.5\");\n  rect.setAttribute(\"rx\", \"3\");\n  rect.setAttribute(\"ry\", \"3\");\n  rect.setAttribute(\"width\", nav.clientWidth - 1);\n  rect.setAttribute(\"height\", nav.clientHeight - 1);\n  var svg = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"svg\");\n  svg.setAttribute(\"xmlns\", \"http:\/\/www.w3.org\/2000\/svg\");\n  svg.setAttribute(\"viewBox\", \"0 0 \"+nav.clientWidth+\" \"+nav.clientHeight);\n  svg.appendChild(rect);\n  nav.appendChild(svg);\n});<\/script><br \/>\n\u306a\u3093\u3067\u7dda\u3092\u63cf\u304f\u3060\u3051\u3067SVG\u3092\u4f7f\u3046\u304b\u3068\u3044\u3046\u3068\u7834\u7dda\u306e\u9593\u9694\uff08stroke-dasharray\uff09\u3084\u958b\u59cb\u4f4d\u7f6e\uff08stroke-dashoffset\uff09\u3068\u3044\u3063\u305f\u8a2d\u5b9a\u304c\u53ef\u80fd\u306a\u70ba\u3060\u3002<br \/>\nSVG\u3092\u80cc\u666f\u306b\u3059\u308b\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u304c\u51fa\u6765\u306a\u3044\u306e\u3067\u30a4\u30f3\u30e9\u30a4\u30f3SVG\u306b\u3057\u305f\u304c\u3001\u90fd\u5ea6HTML\u306b\u631f\u307f\u8fbc\u3080\u306e\u306f\u9762\u5012\u306a\u306e\u3067javascript\u3067\u914d\u7f6e\u3059\u308b\u4e8b\u306b\u3057\u305f\u3002<br \/>\n\u3053\u3053\u3067\u96e3\u6240\u304c\u73fe\u308c\u305f\u4f55\u6545\u304b\u57cb\u3081\u8fbc\u3093\u3067\u3082\u73fe\u308c\u306a\u3044\u306e\u3060\u3001\u958b\u767a\u30c4\u30fc\u30eb\u4e0a\u3067\u306f\u3042\u308b\u306e\u306b\u73fe\u308c\u305a\u3001CSS\u3082\u9069\u5fdc\u3055\u308c\u3066\u3044\u306a\u3044\u3002<br \/>\njavascript\u3067\u901a\u5e38\u4f55\u304b\u8981\u7d20\u3092\u4f5c\u308b\u6642\u306f\u300ccreateElement\u300d\u3092\u4f7f\u3046\u304c\u3001svg\u306e\u3088\u3046\u306a\u540d\u524d\u7a7a\u9593\u3092\u6301\u3064\u8981\u7d20\u3092\u4f5c\u6210\u3059\u308b\u5834\u5408\u306f\u300ccreateElementNS\u300d\u3092\u4f7f\u3046\u3089\u3057\u3044\u3002<\/p>\n<pre><code>var navs = document.body.querySelectorAll('a.anirect');\r\nnavs.forEach(function(nav) {\r\n  var rect = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\r\n  rect.setAttribute(\"x\", \"0.5\");\r\n  rect.setAttribute(\"y\", \"0.5\");\r\n  rect.setAttribute(\"rx\", \"3\");\r\n  rect.setAttribute(\"ry\", \"3\");\r\n  rect.setAttribute(\"width\", nav.clientWidth - 1);\r\n  rect.setAttribute(\"height\", nav.clientHeight - 1);\r\n  var svg = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"svg\");\r\n  svg.setAttribute(\"xmlns\", \"http:\/\/www.w3.org\/2000\/svg\");\r\n  svg.setAttribute(\"viewBox\", \"0 0 \"+nav.clientWidth+\" \"+nav.clientHeight);\r\n  svg.appendChild(rect);\r\n  nav.appendChild(svg);\r\n});<\/code><\/pre>\n<p>\u6b21\u306bCSS\u3067\u3059\u304c98\u3068\u3044\u3046\u306e\u306f\u8981\u7d20\u306e\u9ad8\u3055\u3068\u5e45\u306e\u5408\u8a08\u3067\u3059\u3002<\/p>\n<pre><code>a.anirect {\r\n\tcolor:#FFF;\r\n\ttext-decoration: none;\r\n\tpadding: 5px;\r\n\tfont-size: 12px;\r\n\tdisplay: block;\r\n\tposition: relative;\r\n}\r\na.anirect svg {\r\n\tposition: absolute;\r\n\ttop: 0;left: 0;\r\n\tdisplay:block;\r\n\tpointer-events: none;\r\n}\r\na.anirect svg rect {\r\n\tfill:none;\r\n\tstroke:#FFF;\r\n\tstroke-dasharray: 0 98;\r\n\tstroke-dashoffset: -40;\r\n\tstroke-width: 1;\r\n\ttransition: stroke-dasharray 500ms 0s ease;\r\n}\r\na.anirect:hover svg rect {\r\n\tstroke-dasharray: 98 0;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u822c\u7684\u306b\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306fCSS\u306eborder\u3092\u4f7f\u3046\u3002 CSS\u3060\u3051\u3067\u5b8c\u7d50\u3059\u308b\u306e\u3067\u898b\u3084\u3059\u304f\u4fbf\u5229\u3060\u304c\u3001\u89d2\u4e38\u30672\u70b9\u304b\u3089\u56f2\u3046\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308d\u3046\u3068\u601d\u3063\u305f\u3089CSS\u3067\u306f\u96e3\u3057\u305d\u3046\u306a\u306e\u3067SVG\u3067\u3084\u3063\u3066\u307f\u305f\u3002<\/p>\n","protected":false},"author":2,"featured_media":2313,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[205],"tags":[92,276],"class_list":["post-2257","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creatorsdiary","tag-svg","tag-276"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/comments?post=2257"}],"version-history":[{"count":9,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2257\/revisions"}],"predecessor-version":[{"id":2314,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2257\/revisions\/2314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media\/2313"}],"wp:attachment":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media?parent=2257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/categories?post=2257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/tags?post=2257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}