{"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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"\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\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"uda2\"\/>\n\t<meta name=\"keywords\" content=\"svg,\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/uda2.com\/blog\/svg_line_animatiion\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\n\t\t<!-- Global site tag (gtag.js) - Google Analytics -->\n<script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-PEC0Y4Y4KL\"><\/script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'G-PEC0Y4Y4KL');\n<\/script>\n\t\t<meta property=\"og:locale\" content=\"ja_JP\" \/>\n\t\t<meta property=\"og:site_name\" content=\"\u30a6\u30c02Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"\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\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/uda2.com\/blog\/svg_line_animatiion\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/uda2.com\/blog\/wp-content\/uploads\/borderanime_s.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/uda2.com\/blog\/wp-content\/uploads\/borderanime_s.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"450\" \/>\n\t\t<meta property=\"og:image:height\" content=\"253\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2018-10-31T12:47:36+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2018-10-31T12:47:36+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"\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\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/uda2.com\/blog\/wp-content\/uploads\/borderanime_s.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#article\",\"name\":\"SVG\\u3067\\u30dc\\u30bf\\u30f3\\u306e\\u67a0\\u7dda\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3 | \\u30a6\\u30c02Blog\",\"headline\":\"SVG\\u3067\\u30dc\\u30bf\\u30f3\\u306e\\u67a0\\u7dda\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3\",\"author\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/wp-content\\\/uploads\\\/borderanime_s.jpg\",\"width\":450,\"height\":253},\"datePublished\":\"2018-10-31T21:47:36+09:00\",\"dateModified\":\"2018-10-31T21:47:36+09:00\",\"inLanguage\":\"ja\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#webpage\"},\"articleSection\":\"\\u5236\\u4f5c\\u65e5\\u8a18, SVG, \\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog#listItem\",\"position\":1,\"name\":\"\\u30db\\u30fc\\u30e0\",\"item\":\"https:\\\/\\\/uda2.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/category\\\/creatorsdiary\\\/#listItem\",\"name\":\"\\u5236\\u4f5c\\u65e5\\u8a18\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/category\\\/creatorsdiary\\\/#listItem\",\"position\":2,\"name\":\"\\u5236\\u4f5c\\u65e5\\u8a18\",\"item\":\"https:\\\/\\\/uda2.com\\\/blog\\\/category\\\/creatorsdiary\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#listItem\",\"name\":\"SVG\\u3067\\u30dc\\u30bf\\u30f3\\u306e\\u67a0\\u7dda\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog#listItem\",\"name\":\"\\u30db\\u30fc\\u30e0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#listItem\",\"position\":3,\"name\":\"SVG\\u3067\\u30dc\\u30bf\\u30f3\\u306e\\u67a0\\u7dda\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/category\\\/creatorsdiary\\\/#listItem\",\"name\":\"\\u5236\\u4f5c\\u65e5\\u8a18\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#organization\",\"name\":\"\\u30a6\\u30c02Blog\",\"description\":\"\\u5927\\u962a\\u3067\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u3068\\u3057\\u3066WEB\\u5236\\u4f5c\\u3057\\u3066\\u3044\\u308b\\u7ba1\\u7406\\u4eba\\u304c\\u6c17\\u306b\\u306a\\u3063\\u305f\\u6280\\u8853\\u3092\\u30e1\\u30e2\\u3063\\u305f\\u308a\\u3001\\u4f5c\\u3063\\u305f\\u30c4\\u30fc\\u30eb\\u306e\\u7d39\\u4ecb\\u306a\\u3069\\u3092\\u7db4\\u3063\\u3066\\u3044\\u308b\\u30d6\\u30ed\\u30b0\\u3067\\u3059\\u3002\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/#author\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/\",\"name\":\"uda2\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e71f43b9e5830ff1e243e7edc1de9530ebe46766d3add1ef213a72c35c0a7c98?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"uda2\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#webpage\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/\",\"name\":\"SVG\\u3067\\u30dc\\u30bf\\u30f3\\u306e\\u67a0\\u7dda\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3 | \\u30a6\\u30c02Blog\",\"description\":\"\\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\",\"inLanguage\":\"ja\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/wp-content\\\/uploads\\\/borderanime_s.jpg\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#mainImage\",\"width\":450,\"height\":253},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/svg_line_animatiion\\\/#mainImage\"},\"datePublished\":\"2018-10-31T21:47:36+09:00\",\"dateModified\":\"2018-10-31T21:47:36+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/\",\"name\":\"\\u30a6\\u30c02Blog\",\"description\":\"\\u5927\\u962a\\u3067\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u3068\\u3057\\u3066WEB\\u5236\\u4f5c\\u3057\\u3066\\u3044\\u308b\\u7ba1\\u7406\\u4eba\\u304c\\u6c17\\u306b\\u306a\\u3063\\u305f\\u6280\\u8853\\u3092\\u30e1\\u30e2\\u3063\\u305f\\u308a\\u3001\\u4f5c\\u3063\\u305f\\u30c4\\u30fc\\u30eb\\u306e\\u7d39\\u4ecb\\u306a\\u3069\\u3092\\u7db4\\u3063\\u3066\\u3044\\u308b\\u30d6\\u30ed\\u30b0\\u3067\\u3059\\u3002\",\"inLanguage\":\"ja\",\"publisher\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","description":"\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","canonical_url":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/","robots":"max-image-preview:large","keywords":"svg,\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3","webmasterTools":{"miscellaneous":"&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;\n&lt;script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-PEC0Y4Y4KL\"&gt;&lt;\/script&gt;\n&lt;script&gt;\n&nbsp; window.dataLayer = window.dataLayer || [];\n&nbsp; function gtag(){dataLayer.push(arguments);}\n&nbsp; gtag('js', new Date());\n\n&nbsp; gtag('config', 'G-PEC0Y4Y4KL');\n&lt;\/script&gt;"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#article","name":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","headline":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3","author":{"@id":"https:\/\/uda2.com\/blog\/author\/uda2\/#author"},"publisher":{"@id":"https:\/\/uda2.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/borderanime_s.jpg","width":450,"height":253},"datePublished":"2018-10-31T21:47:36+09:00","dateModified":"2018-10-31T21:47:36+09:00","inLanguage":"ja","mainEntityOfPage":{"@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#webpage"},"isPartOf":{"@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#webpage"},"articleSection":"\u5236\u4f5c\u65e5\u8a18, SVG, \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3"},{"@type":"BreadcrumbList","@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog#listItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/uda2.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/#listItem","name":"\u5236\u4f5c\u65e5\u8a18"}},{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/#listItem","position":2,"name":"\u5236\u4f5c\u65e5\u8a18","item":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/","nextItem":{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#listItem","name":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3"},"previousItem":{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog#listItem","name":"\u30db\u30fc\u30e0"}},{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#listItem","position":3,"name":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3","previousItem":{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/#listItem","name":"\u5236\u4f5c\u65e5\u8a18"}}]},{"@type":"Organization","@id":"https:\/\/uda2.com\/blog\/#organization","name":"\u30a6\u30c02Blog","description":"\u5927\u962a\u3067\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3068\u3057\u3066WEB\u5236\u4f5c\u3057\u3066\u3044\u308b\u7ba1\u7406\u4eba\u304c\u6c17\u306b\u306a\u3063\u305f\u6280\u8853\u3092\u30e1\u30e2\u3063\u305f\u308a\u3001\u4f5c\u3063\u305f\u30c4\u30fc\u30eb\u306e\u7d39\u4ecb\u306a\u3069\u3092\u7db4\u3063\u3066\u3044\u308b\u30d6\u30ed\u30b0\u3067\u3059\u3002","url":"https:\/\/uda2.com\/blog\/"},{"@type":"Person","@id":"https:\/\/uda2.com\/blog\/author\/uda2\/#author","url":"https:\/\/uda2.com\/blog\/author\/uda2\/","name":"uda2","image":{"@type":"ImageObject","@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/e71f43b9e5830ff1e243e7edc1de9530ebe46766d3add1ef213a72c35c0a7c98?s=96&d=mm&r=g","width":96,"height":96,"caption":"uda2"}},{"@type":"WebPage","@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#webpage","url":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/","name":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","description":"\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","inLanguage":"ja","isPartOf":{"@id":"https:\/\/uda2.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#breadcrumblist"},"author":{"@id":"https:\/\/uda2.com\/blog\/author\/uda2\/#author"},"creator":{"@id":"https:\/\/uda2.com\/blog\/author\/uda2\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/borderanime_s.jpg","@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#mainImage","width":450,"height":253},"primaryImageOfPage":{"@id":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/#mainImage"},"datePublished":"2018-10-31T21:47:36+09:00","dateModified":"2018-10-31T21:47:36+09:00"},{"@type":"WebSite","@id":"https:\/\/uda2.com\/blog\/#website","url":"https:\/\/uda2.com\/blog\/","name":"\u30a6\u30c02Blog","description":"\u5927\u962a\u3067\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3068\u3057\u3066WEB\u5236\u4f5c\u3057\u3066\u3044\u308b\u7ba1\u7406\u4eba\u304c\u6c17\u306b\u306a\u3063\u305f\u6280\u8853\u3092\u30e1\u30e2\u3063\u305f\u308a\u3001\u4f5c\u3063\u305f\u30c4\u30fc\u30eb\u306e\u7d39\u4ecb\u306a\u3069\u3092\u7db4\u3063\u3066\u3044\u308b\u30d6\u30ed\u30b0\u3067\u3059\u3002","inLanguage":"ja","publisher":{"@id":"https:\/\/uda2.com\/blog\/#organization"}}]},"og:locale":"ja_JP","og:site_name":"\u30a6\u30c02Blog","og:type":"article","og:title":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","og:description":"\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","og:url":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/","og:image":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/borderanime_s.jpg","og:image:secure_url":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/borderanime_s.jpg","og:image:width":450,"og:image:height":253,"article:published_time":"2018-10-31T12:47:36+00:00","article:modified_time":"2018-10-31T12:47:36+00:00","twitter:card":"summary","twitter:title":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","twitter:description":"\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","twitter:image":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/borderanime_s.jpg"},"aioseo_meta_data":{"post_id":"2257","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":"","og_description":"","og_object_type":"article","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":"","og_article_tags":"","twitter_use_og":false,"twitter_card":"summary","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2021-02-16 06:38:50","updated":"2022-10-03 16:41:19","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/uda2.com\/blog\" title=\"\u30db\u30fc\u30e0\">\u30db\u30fc\u30e0<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/\" title=\"\u5236\u4f5c\u65e5\u8a18\">\u5236\u4f5c\u65e5\u8a18<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tSVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"\u30db\u30fc\u30e0","link":"https:\/\/uda2.com\/blog"},{"label":"\u5236\u4f5c\u65e5\u8a18","link":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/"},{"label":"SVG\u3067\u30dc\u30bf\u30f3\u306e\u67a0\u7dda\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3","link":"https:\/\/uda2.com\/blog\/svg_line_animatiion\/"}],"_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}]}}