6

単一の SVG 背景画像のみを使用して左右のナビゲーション ボタンを作成し、それを水平方向に反転して反対方向にします。これは、Internet Explorer 9 を除く、 CSS 2D 変換をサポートするすべてのブラウザーで正常に機能します。基本的に、CSS は次のようになります。

div.nav-left, div.nav-right {
    background-image: url('TriangleArrow-Right.svg');
}

div.nav-left {
        -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
                transform: scaleX(-1);
}

Internet Explorer 10、Firefox、Chrome、Safari などで正しく表示されるjsFiddleを作成しました。

Chrome 22 でのレンダリング

しかし、実際には IE9 では次のようになります。

Internet Explorer 9 でのレンダリング

ボタンが指す方向を示すために、大なり記号を含めました。そして実際には、IE9 が変換をテキストに正しく適用していることがわかりますが、SVG 背景画像に対してはまったく逆のことを行っています。

SVG 背景画像を PNG に変更すると、すべてが IE9 で正しく動作しますが、このjsFiddleを参照してください。

これに関する情報は見つかりませんでした。IE9 は CSS 変換とSVG を CSS 背景として正しくサポートする必要があるため、これはバグのようです。

4

3 に答える 3

2

IEの特別な構文を使用する必要があると思います:

div.nav-left {
    -webkit-transform: scaleX(-1);
    /*-ms-transform: scaleX(-1);*/
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    transform: scaleX(-1);
    left: -50px;
}

http://jsfiddle.net/g2y86/1/

あまりシャープに見えませんが、もっと良い方法があるかもしれません。

編集

反転するには、これを試してください（-ms-filterとfilter行の両方がIE用であることに注意してください）：

div.nav-left {
    -webkit-transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
    transform: scaleX(-1);
    left: -50px;
}

http://jsfiddle.net/2cPYR/

于 2012-10-31T10:41:08.953 に答える
0

以前filter: FlipV;はie9に対応していました

-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9
于 2016-09-12T22:10:26.697 に答える
0

私が試したところ、scaleX-property は実際には、svg 背景画像の負の数では機能しません。変換しようとしている div に異なる色の境界線を適用すると、実際には正しく変換されることがわかりますが、背景画像はそのコンテナーに適応していません。

差し迫った問題を解決したいだけの場合は、 を使用できます-ms-transform: rotate(180deg);。svg は、ここで何をすべきかを知っているようです。

于 2012-10-31T11:01:58.633 に答える