5

ここでは、SVG、CSS3 transform、およびさまざまなブラウザーでいくつかのことを試しています。
これは私のHTMLコードです:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
    <style type="text/css">
    .svg-holder {
        text-align: center;
        padding: 50px;
    }
    .img1 {
        transform: rotate(180deg); /* IE10 and Mozilla */
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Chrome and Safari */
    }
    .img2 {
        transform: scale(3,3); /* IE10 and Mozilla */
        -ms-transform: scale(3,3); /* IE 9 */
        -webkit-transform: scale(3,3); /* Chrome and Safari */
    }
    .bg {
        background-color: yellow;
        background-image: url(arrow.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg);
    }
    </style>
</head>
<body>
    <div class="svg-holder img1">
        <img src="arrow.svg" class="red-arrow">
    </div>
    <div class="svg-holder img2">
        <img src="arrow.svg">
    </div>

    <div class="svg-holder bg">
    </div>
</body>
</html>

「arrow.svg」ファイルの内容は次のとおりです (ただし、任意の .svg を使用できます)。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="35.551px" height="35.551px" viewBox="0 0 35.551 35.551" enable-background="new 0 0 35.551 35.551" xml:space="preserve">
<polygon fill="#404040" points="17.775,0 0,17.775 11.109,17.775 11.109,35.551 24.441,35.551 24.441,17.775 35.551,17.775 "/>
</svg>

ただし、上記のコードがレンダリングされる方法は、IE9 とその他の (通常の) ブラウザーでは異なります。ハイライトされた矢印 (デフォルトでは矢印は上向き) に注意してください。.bg

これは Chrome のスクリーンショットです。矢印は 90 度回転し、右を指しています (このコードをレンダリングする正しい方法です)。
クロム結果

これは IE9 のスクリーンショットです。矢印は 180 度回転し、下を向いています。
ie9-結果

誰でもこれを説明できますか？

編集：

より簡単な例の JSFiddle

4

3 に答える 3

0

私は最近、質問に関連し、物事を簡単にする可能性のある CSS Sandpaper と呼ばれるハックについて知りました。

このハックは、古いバージョンの IE 用の標準的な CSS 変換のサポートを実装しています。これで、CSS に次のコードを追加できます。

-sand-transform: rotate(10deg);

それ以外の場合は、次のコードを使用して必要なことを行うこともできます。

-ms-transform: matrix(0.000,1,-1,0.000,0,0);

IE 9 では、deg の使用中にこれらの問題が発生することがあります

于 2013-11-16T09:30:09.853 に答える
-1

私はフィドルでこれを試しました：http://jsfiddle.net/c6brV/

.logo {
 background-image: url(http://upload.wikimedia.org/wikipedia/commons/a/aa/Aiga_uparrow.svg);
 background-repeat: no-repeat;
 background-size: contain;
 width: 100px;
 height: 100px;
 margin: 0 auto;
 transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg);

}

別のウィキメディアの矢印を使用しました。これは、私が試したすべての IE バージョン (11、10、および 9) で正しいことを示しています。

おそらくあなたの問題の原因は異なりますか？

ここに画像の説明を入力

于 2013-11-16T09:58:40.753 に答える