6

イラストレーターで svg を作成し、それを背景画像として使用してページの上部と下部を埋めようとしていますが、幅 950px の div 内にあり、問題が解決していません。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.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="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>

イラストレーターが幅と高さの要素を与えていることがわかるように、これは私の svg です。これらを削除したので、css で設定できます。

#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;                    
}

次のような、svg からサイズを削除し、css にスタイルを追加するさまざまな組み合わせを試しました。

background-size: cover;
background-size: 950px cover;
background-size: 100% 100%;
background-size: contain;

しかし、私がしていることは何もうまくいかないようです。何か案は？svgs について私が理解していない基本的なことがあるでしょうか? 何かを表示できるようになったときの動作は、サイズが完全に設定されるか、サイズが設定されてから、ウィンドウを小さくすると幅が縮小され、アスペクト比が維持されるようです。

ウィンドウが大きくても、次のように見えるはずです。

両側の黒い曲線は、幅 950px の青い要素内の形状です。

しかし、ウィンドウの高さを大きくすると、側面が消えます。これは使用しています

background-size: cover;

css では、svg にはディメンションはありません。

右側が消えた

次のように設定幅を追加すると：

background-size: 950px cover;

次のように表示されます。

セット幅の追加

ウィンドウを小さくすると、次のようになります。

なに？ これは特に迷惑です。

編集

関連するcssとHTMLの残りの部分は次のようになります

CSS

/* Main Containers */
.center{
                    margin: 0px auto;
                    width: 1200px;
                    height: 100%;
}
#left{
                    width: 150px;
                    height: 100%;
                    display: block;
                    float: left;
                    background: #000000;
}
#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;
                    background-size: cover;

}
#right{
                    width: 100px;
                    height: 100%;
                    display: block;
                    float: left;
                    background: #000000;
}

HTML

<body>
    <div class="center">


        <div id="left">
            <!-- Header -->

            <!-- END Header -->

        </div>


        <!-- Nav -->
        <div id="nav">

        </div>
        <!-- END Nav -->

        <div id="middle">


        </div>

        <div id="right">

        </div>
        <!-- Footer -->

        <!-- END Footer -->

    </div>
</body>
4

2 に答える 2

5

私の問題の解決策を見つけました

使用して

preserveAspectRatio="none"

svg ファイル内

そのようです：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.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"
viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" preserveAspectRatio="none" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>

サイズは svg から完全に削除されます。viewBox または enableBackground プロパティを削除しないでください - これらは重要です。

次のようなCSS：

#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;
                    background-size: 100% 100%;                 
}

※結果はこちら※

全画面表示

大きな窓

小さな画面

小窓

于 2012-09-02T02:09:33.533 に答える
0

max-widthCSSプロパティを使用します。これを試して：

#middle{
                    max-width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;   
                    background-size: 950px 100%;                 
}
于 2012-09-02T00:05:13.623 に答える