1

画像の特定のセクションにハイパーリンクを埋め込む必要がある HTML ページを作成しました。このために、イメージ マップ タグを使用する必要がないように SVG タグを使用しました。

これは、ページがクロムでどのように見えるかですここに画像の説明を入力

<svg id="mySVG" style="width:100%;height:100%;" version="1.1" viewbox="0 0 2000 2000" xmlns="http://www.w3.org/2000/svg">
    <image style="width:inherit;height:inherit;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Image URL">
    </image>
        <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Image URL">
            <circle cx="45%" cy="33%" r="120" stroke="black" stroke-width="3" opacity="0" fill="#fff">
            </circle>
        </a>    
        .
        .
        //More <a> tags representing the various clickable points in the image
        .
        .
        .
</svg>

基本的に IMAGE タグの画像は読み込まれず、画面は背景の色になります。chrome の方がルールに寛大であることは知っていますが、エラーを犯したとは思いません。このコードは Chrome では問題なく動作しますが、他のブラウザでは画像が読み込まれません。「壁紙」、「ボタン」、「ポスター」などの画像リンクがありますが、紙の本来あるべき場所をクリックすると新しいタブで個別に開きますが、それ以外の場合は機能しません。

4

1 に答える 1

0

SVG 1.1 では、 SVG<image>タグには幅と高さの属性が必要です。CSS プロパティは許可されていません。

Chrome は、幅と高さの SVG 2 CSS プロパティの実装を実験しているため、そこで動作します。SVG 2 仕様は未完成であり、現在この機能を実装している UA は他にありません。ただし、仕様が完成に近づくにつれ、より多くの UA がこの機能を実装することになると思います。

于 2015-09-15T18:16:44.260 に答える