Tworzenie svg, który skaluje się do wysokości przeglądarki, ale ma ustawioną szerokość

Próbuję utworzyć svg w programie Illustrator i użyć go jako obrazu tła do wypełnienia górnej i dolnej części strony, ale nadal znajduję się wewnątrz elementu div, ma szerokość 950 pikseli i nie ma końca problemów.Tworzenie svg, który skaluje się do wysokości przeglądarki, ale ma ustawioną szerokość

<?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>

To jest mój svg, jak widać ilustrator podał elementy szerokości i wysokości. Usunąłem je więc mogę ustawić je w CSS:

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

próbowałem różne kombinacje usuwania rozmiary z SVG i dodawanie stylów w CSS, takie jak:

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

ale nic Wydaje mi się, że działa. Jakieś pomysły? Może być coś podstawowego, czego nie rozumiem po svgs? Zachowanie, gdy mogę go wyświetlić w ogóle, wydaje się, że albo staje się całkowicie ustawiony, albo ma ustawiony rozmiar, a gdy zmniejszy to okno, zmniejsza szerokość i zachowuje proporcje.

Its ma wyglądać to jednak dużego okna jest:

The black curves on both sides are shapes inside the blue element with 950px width

Ale kiedy robię wysokość okna większy bok to disapears ta korzysta

background-size: cover;

W css i brak wymiarów w svg.

The right side has dissapeared

Kiedy dodać określoną szerokość tak:

background-size: 950px cover;

Wyświetla on tak:

Adding set width

A jeśli robię okno mniejszy jest to robi:

What the ? Co jest szczególnie denerwujące.

EDIT

Reszta CSS i HTML zainteresowanych wygląda tak

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>

Źródło

2012-09-01 bluefantail

znalazł rozwiązanie mojego problemu

korzystając

preserveAspectRatio="none"

w pliku SVG

tak:

<?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>

Wielkości są usuwane od svg całkowicie. Nie usuwaj właściwości viewBox ani enableBackground - te są ważne.

Css tak:

#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%;     
}

* Oto wynik *

Full screen

Duże okno

Small screen

Mały wi ndow

Źródło

2012-09-02 02:09:33 bluefantail

Więc to jak to zrobić. – bluefantail

Do tej pory testowałem to działając w Google Chrome 21, i ff 14 – bluefantail

Użyj max-width Właściwość CSS.Spróbuj tego:

#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%;     
}

Źródło

2012-09-02 00:05:13

Witam okrzyki, na którym elemencie? – bluefantail

Zawierająca "div". Czy zawiera on div wewnątrz innego "div", czy tylko "body"? –

Właśnie zaktualizowałem moją odpowiedź. Spróbuj tego. –

Tworzenie svg, który skaluje się do wysokości przeglądarki, ale ma ustawioną szerokość

Odpowiedz

Powiązane problemy