最終目的
AWSのSimpleIconを有効活用してAWSアイコンクイズでも作成する
今回はAWSから配られているファイルフォーマットのSVGを利用すべく
以前から気になっていた AdobeのSnap.svg を利用してみました。
http://snapsvg.io/
とりあえず表示してみたという所で、右下の本日のAWSサービスしかお見せ出来ませんが
引き続き綴って行きます。
<!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>
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', ''));
}
投稿者プロフィール
-
Japan AWS Ambassadors 2023, 2024
開発会社での ASP型WEBサービス企画 / 開発 / サーバ運用 を経て
2010年よりスカイアーチネットワークスに在籍しております
機械化/効率化/システム構築を軸に人に喜んで頂ける物作りが大好きです。
