Windows Phone 向けの HTML5 ページで、SVG と ECMAScript を使う ～MSDN「コードレシピ」サンプル追加のお知らせ（10) ～

MSDN 「コードレシピ」で公開されたサンプルの案内です。

[SVG/ECMAScript​] Windows Phone 対応の HTML5 の Web ページで、SVG とECMAScript を使う

たとえばWeb上に、ベクトルデータのイラストがあったとします。インテリアでも洋服でも何でもかまいません。カーテンとラグとか、ストールとジャケットとか、なにか色の組み合わせを試してみたい商品のセットです。
商品の上をタッチした時、色が変わり、組み合わせを目で見て確認できるようにし、さらに、商品番号にタッチすると、詳細データが表示されるようにする。
Windows Phone で閲覧するWebページに、そのような処理を使いたい時、利用できるかもしれません。

Windows Phone 搭載の Internet Explorer では、SVG を表示できます。
HTML5 の Web ページに、ECMAScript を含む SVG ファイルを埋め込んでおき、グループ化した複数の SVG 要素をタッチした時、ECMAScript で矩形のスタイルを変えています。また、矩形またはリンク文字列をタッチした時、別の Web ページを表示します。

SVGを操作するとき、まず、とっつきにくいのが、HTML 5 とCSSとSVGとECMAScriptをどのように関連付ければよいかというファイル構成です。小さなサンプルですが、その参考になればと思います。