SVGエッセンシャルズ 第2版

13章対話性

ここまで、SVG文書の作成者であるあなたは、グラフィックスに関してさまざまな決定を行ってきました。静止画像の外観をどのようにすべきか、アニメーションを使うのであれば、それらをいつ開始および停止すべきか、などを決定してきました。この章では、それらの制御の一部を、文書を見ている人にゆだねる方法について学びます。

最も低いレベルの対話性（interactivity）†1は、宣言的な対話性（declarative interactivity）と呼ばれるものです。これは、特定の状況において何が行われるべきかをブラウザーに指示することで生み出される、アニメーションやその他のスタイルの変化です。スクリプトを使ってそれらの効果を直接制御するものではありません。SVGでは、限定されたものではありますが、組み込みの対話的な状態が用意されています。

[†1] 訳注：「interactivity」は「双方向性」や「相互作用性」などとも訳されますが、9章ではテキストの方向を示す用語として「双方向性」（bidirectionality）という訳語を使ったので、ここではこのように訳しています。

13.1　SVGでのリンクの使用

最も簡単に提供できる種類の対話性は、<a>要素によって実現されるリンクです。グラフィックをこの要素で囲むことにより、グラフィックはアクティブになります。つまり、グラフィックをクリックすると、xlink:href属性で指定されたURLにジャンプします。別のSVGファイルにリンクすることもできますし、ユーザーの環境にもよりますが、Webページにリンクすることもできます。例13-1では、「Cat」という単語がSVGで作った猫の絵にリンクされており、クリックするとその絵にジャンプします。赤、緑、青の図形は、W3CのSVGのページにリンクされており、クリックするとそのページに移動します。後者のリンクでは、境界ボックス全体ではなく、個々の項目が同じリンク先に個別にリンクされています。この例を実際にテストして、マウスポインターを図形の間に動かしてみると、それらの領域はクリックしても反応しないことがわかるでしょう。 ...