Zmiana rozmiaru obrazu svg jako tła w przeglądarce Chrome

Question

Używam obrazu svg jako tła i rozciągam obraz SVG przez rozmiar tła. Chcę, żeby była to tylko szerokość. Działa doskonale w firefoxie, IE9 +, ale chromie. Proszę, zasugeruj mi, jak mogę to osiągnąć.

.homecallouts ul li { 
background-image: url('blue_arow_callout.svg'); 
background-size: 100% 100%; 
width: 21%; 
height: 42px; 

zobaczyć kod jsbin http://jsbin.com/uvijuc/4/

kiedy zmiana rozmiaru w firefox tylko szerokość odcinek, ale w chrome zarówno szerokość i wysokość są rozciągania. Chcę rozciągnąć tylko szerokość.

Answer 1

Myślę, że pod względem technicznym chrom jest poprawny, musisz dopasować wartości tła do tego, czego naprawdę chcesz. Utrzymanie ich na poziomie 100% wymusza zachowanie proporcji.

Answer 2

Może dodanie preserveAspectRatio = "none" do otwarcia tagu w pliku SVG może pomóc?

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.4, 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="282.05px" height="61.974px" viewBox="286.287 26.514 282.05 61.974" enable-background="new 286.287 26.514 282.05 61.974" 
    xml:space="preserve" preserveAspectRatio="none"> 
<polygon fill="#0063AF" points="538.337,26.514 286.287,26.514 316.287,57.5 286.287,88.488 538.337,88.488 568.337,57.5 "/> 
</svg> 

JSBin example

Answer 3

Nie używaj tła rozmiarze. W pliku SVG musisz mieć następujące wartości: width, height i preserveAspectRatio.

<svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="..." /> 

Pamiętaj, że aby to działało, twój SVG musi mieć również prawidłowy widok. Wydaje się, że to robi.

Answer 4

To błąd przeglądarki Chrome. Regresja w rzeczywistości.

http://code.google.com/p/chromium/issues/detail?id=113414

Answer 5

nie mam wystarczającej reputacji upvote lub komentarz, więc tylko odpowiadając ponownie zadziała. Rozwiązałem podobny przypadek, dodając po prostu preserveAspectRatio = "none".

<svg 
xmlns:dc="http://purl.org/dc/elements/1.1/" 
xmlns:cc="http://creativecommons.org/ns#" 
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
xmlns:svg="http://www.w3.org/2000/svg" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
width="591.42859" 
height="250.24918" 
id="svg2" 
version="1.1" 
preserveAspectRatio="none" 
inkscape:version="0.48.2 r9819" 
sodipodi:docname="background.svg">