最終目的
AWSのSimpleIconを有効活用してAWSアイコンクイズでも作成する
今回はAWSから配られているファイルフォーマットのSVGを利用すべく
以前から気になっていた AdobeのSnap.svg を利用してみました。
http://snapsvg.io/
とりあえず表示してみたという所で、右下の本日のAWSサービスしかお見せ出来ませんが
引き続き綴って行きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Quiz AWS SimpleIcon</title></head><body><svg id="svg" width="150px" height="150px"></svg></body><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="js/snap.svg-min.js"></script><script src="js/quiz.js"></script></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function showIcon(answerNum){ var s = Snap("#svg"); var g = s.group(); var simpleLogo = Snap.load(img_path + img[answerNum], function ( loadedFragment ) { g.append(loadedFragment); });}function showSelection(answerNum){ var s = Snap("#svg"); var g = s.group(); g.text(0, 110, "今日のAWSサービス"); g.text(20, 130, img[answerNum].replace('.svg', ''));} |
投稿者プロフィール
