{"id":1160,"date":"2020-02-08T23:28:57","date_gmt":"2020-02-08T14:28:57","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=1160"},"modified":"2020-02-17T02:24:06","modified_gmt":"2020-02-16T17:24:06","slug":"blog82","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog82\/","title":{"rendered":"(82) \u3010SVG\u753b\u50cf\u3011WEB\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u3002(JavaScript\u7de8#1 Snap.svg)"},"content":{"rendered":"

1. \u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n

\u904e\u53bb\u306e\u6295\u7a3f\u3067\u306f CSS\u3092\u5229\u7528\u3057\u305f\u30d9\u30af\u30bf\u753b\u50cf\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u3063\u3066\u307f\u305f\u3002<\/p>\n

\u3067\u3082…
\nCSS\u306b\u3088\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u30d9\u30af\u30bf\u753b\u50cf\u306e\u9802\u70b9\u60c5\u5831\u3092\u6642\u9593\u5909\u5316\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u305a
\n\u30d9\u30af\u30bf\u753b\u50cf\u3092\u3050\u306b\u3083\u3050\u306b\u3083\u3068\u5909\u5f62\u3055\u305b\u308b\u3053\u3068\u304c\u51fa\u6765\u306a\u304b\u3063\u305f\u3002<\/span>
\n\u81ea\u5206\u304c\u77e5\u3089\u306a\u3044\u3060\u3051\u306e\u53ef\u80fd\u6027\u3082\u3042\u308b\u304c…<\/span><\/p>\n

\u305d\u3053\u3067\u4eca\u56de\u306f…
\nJavaScript\u3092\u4f7f\u7528\u3057\u3066 SVG\u306e\u5c5e\u6027\u3092\u6642\u9593\u5909\u5316\u3055\u305b\u305f\u3044\u3002
\n\u3059\u306a\u308f\u3061…
\n\u30d9\u30af\u30bf\u753b\u50cf\u306e\u9802\u70b9\u60c5\u5831\u3092\u6642\u9593\u5909\u5316\u3055\u305b\u3066\u56f3\u5f62\u3092\u3050\u306b\u3083\u3050\u306b\u3083\u3068\u52d5\u304b\u3057\u305f\u3044\uff01<\/span><\/p>\n

(1) \u5b9f\u73fe\u624b\u6bb5<\/h3>\n

\u4eca\u56de\u306f Snap.svg<\/span> \u3092\u5229\u7528\u3055\u305b\u3066\u3044\u305f\u3060\u304f\u3002Snap.svg\u306f Photoshop\u3067\u6709\u540d\u306a\u3042\u306e Adobe\u793e\u304c 2013\u5e74\u306b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u3068\u3057\u3066\u516c\u958b\u3057\u3066\u304f\u308c\u305f\u30d5\u30ea\u30fc\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3060\u3002
\nhttp:\/\/snapsvg.io\/
\n\"\"<\/a><\/p>\n

(2) \u304a\u984c<\/h3>\n

\u904e\u53bb\u6295\u7a3f (79) \u3010SVG\u753b\u50cf\u3011WEB\u30d6\u30e9\u30a6\u30b6\u306bSVG\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u3002<\/a> \u3067\u4f5c\u6210\u3057\u305f\u661f\u5f62\u30d9\u30af\u30bf\u753b\u50cf\u306e\u9802\u70b9\u3092\u52d5\u304b\u3057\u3001\u2605\u3092\u6b6a\u307e\u305b\u305f\u3044\u3002<\/p>\n

<\/p>\n

2. \u3084\u3063\u3066\u307f\u308b<\/h1>\n

\u3010Step 1\u3011polygon\u30bf\u30b0\u306e points\u5c5e\u6027\u306e\u5024\u3092\u6642\u9593\u5909\u5316\u3055\u305b\u308b\u3002<\/h3>\n
\r\n<!DOCTYPE html>\r\n<html lang="ja">\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>00082 demo1<\/title>\r\n<\/head>\r\n<body>\r\n<svg id="star-svg" xmlns="http:\/\/www.w3.org\/2000\/svg" viewBox="0 0 188.43 180.82">\r\n    <defs>\r\n        <style>\r\n            .cls-1{\r\n                fill:#efea3a;\r\n                stroke:#231815;\r\n                stroke-miterlimit:10;\r\n                stroke-width:6px;\r\n            }\r\n        <\/style>\r\n    <\/defs>\r\n    <title>return\u30a2\u30bb\u30c3\u30c8 1<\/title>\r\n    <g id="\u30ec\u30a4\u30e4\u30fc_2" data-name="\u30ec\u30a4\u30e4\u30fc 2">\r\n        <g id="\u30ec\u30a4\u30e4\u30fc_1-2" data-name="\u30ec\u30a4\u30e4\u30fc 1">\r\n            <polygon id="star_poly" class="cls-1" points="151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22"\/>\r\n        <\/g>\r\n    <\/g>\r\n<\/svg>\r\n\r\n<script src=".\/snap.svg-min.js"><\/script>\r\n<script>\r\nsvg = Snap('#star-svg');\r\npoly = svg.select('#star_poly');\r\nstartPts = "151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54  6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22";\r\nendPts   = "151.38 172.22 96.34 145.21 42.89 175.23 51.57 124.54 26.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 162.04 75.11 119.34 100.11 151.38 172.22";\r\nfunction anim(){\r\n  poly.animate({'points':endPts}, 1000, function(){\r\n    this.animate({'points':startPts}, 1000, function(){\r\n      anim();\r\n    });\r\n  });\r\n};\r\nanim();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n