Thay đổi kích thước hình ảnh svg làm nền trong trình duyệt chrome

Question

Tôi đang sử dụng hình ảnh svg làm nền và tôi đang kéo dài hình ảnh SVG qua kích thước nền. Tôi muốn nó được strech chỉ chiều rộng khôn ngoan. Nó hoạt động hoàn toàn tốt trong firefox, IE9 + nhưng chrome. Xin đề nghị tôi làm thế nào tôi có thể đạt được nó.

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

xem mã jsbin http://jsbin.com/uvijuc/4/

khi tôi thay đổi kích thước trong firefox chỉ căng rộng nhưng trong chrome cả chiều rộng và chiều cao được kéo dài. Tôi chỉ muốn chiều rộng kéo dài.

Answer 1

Tôi nghĩ về mặt kỹ thuật chrome là chính xác trên cái này, bạn cần phải điều chỉnh các giá trị kích thước nền của bạn thành những gì bạn thực sự muốn. Giữ chúng ở 100% là buộc tỷ lệ khung hình không đổi.

Answer 2

Có thể thêm preservAspectRatio = "none" để mở thẻ trong tệp SVG có thể trợ giúp?

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

Không sử dụng background-kích thước. Những gì bạn cần làm là có các giá trị sau cho chiều rộng, chiều cao và maintainAspectRatio trong tệp SVG của bạn.

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

Lưu ý rằng để làm việc này, SVG của bạn cũng cần có hộp xem hợp lệ. Mà nó xuất hiện để làm.

Answer 4

Đó là lỗi của Chrome. Regression, trên thực tế.

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

Answer 5

tôi không có đủ uy tín để upvote hoặc nhận xét, vì vậy chỉ trả lời nó một lần nữa sẽ làm việc. Tôi đã giải quyết một trường hợp tương tự bằng cách chỉ cần thêm preservAspectRatio = "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">