3

SVGキャンバス（フルアプリはd3を使用）とキャンバスに描画された画像要素を使用するインタラクションを設計しようとしています。ユーザーが画像にカーソルを合わせたりクリックしたりすると、各画像が何らかの形で変化して、選択されていることを示します。私が考えることができる最も基本的なスタイルの変更は、画像の輪郭を変更することです（つまり、画像の周囲に境界線を描画します）。これはChrome 23 / Chromium 20で正常に機能します。ただし、Firefox16では効果がありません。

jsFiddle： http: //jsfiddle.net/RSLsy/

コード：

<!DOCTYPE HTML>
<html>
<body>

<style>
.map {
    background-color: blue;
}
.button:hover {
    outline: solid medium black;
}
</style>

<div>
<svg width="400" height="300" class="map">
    <image class="button" xlink:href="http://www.gstatic.com/ui/v1/button/search-white.png"
        x="10" y="10" width="20" height="20"/>
</svg>
</div>

</body>
</html>

このタイプのエフェクトクロスブラウザを実現する方法についてのアイデアはありますか？

前もって感謝します！

4

1 に答える 1

1

png画像の使用に限定されず、拡大鏡のようなアイコン形状の画像をsvgパスとして使用できる可能性がある場合は、JQueryを使用して、塗りつぶしやストロークなどをアニメーション化できます。これは、アニメーション化に関する別のSO質問のために作成したフィドルです。ホバーすると色が変わり、再利用できる可能性があります。

http://jsfiddle.net/webchemist/hBHBn/

あなたの場合、JQueryUIColorプラグインフックを次のように変更します。

jQuery.Color.hook('stroke');

アウトライン効果を取得します。そのフィドルは、IE9およびFirefox、Opera、Chrome、Safariの現在のすべてのバージョンで機能するはずです。

編集

画像の同じサイズと場所の空の長方形で画像要素をグループにラップすることで、chrome＆firefox w css（他のブラウザでテスト済み）で同じ効果が得られるようにフィドルを更新しました。rect要素が開いていない状態でグループ要素が画像要素のサイズにならない理由がわかりません。画像要素ごとに空の長方形を複製することはおそらく理想的ではありませんが、元のフィドルのsvgパスを作成するよりも簡単かもしれません。解決

http://jsfiddle.net/RSLsy/2/

于 2012-11-14T22:08:16.053 に答える