vị trí hình ảnh nền svg luôn nằm ở vị trí trung tâm trong trình khám phá internet, mặc dù vị trí nền: trái giữa;

Question

Tôi đang sử dụng biểu tượng SVG làm hình nền và có vẻ như tôi không thể căn chỉnh chính xác ở bên trái trong Internet Explorer (chỉnh sửa: và Safari).

Các container trông giống như vậy:

<div id="header"> 
    <div id="logo"></div> 
</div> 

Với phong cách:

#header{ 
    width: 100%; 
    max-width: 1200px; 
    height: 100%;} 

#logo{ 
    background: url(../images/ss_logo.svg); 
    background-position: left center; 
    width: 100%; 
    height: 100%; 
    float: left;} 

Bạn có thể thấy rằng <div> nên trải rộng 100% của công ty mẹ của nó nhưng hiển thị logo bên trái của thành phần. Điều này hoạt động tốt trong Chrome và Safari, nhưng biểu tượng luôn được đặt ở giữa trong <div id="logo"> trong IE.

Thông tin có vẻ thực sự khó tìm thấy, có ai khác có cùng vấn đề không?

Đây là liên kết đến số example version of the problem, hộp màu xanh lục là SVG.

Answer 1

Sự cố không phải với CSS của bạn mà với SVG của bạn. SVG sẽ phát triển để lấp đầy toàn bộ nền của ô phần tử (như mong đợi). Làm thế nào quy mô SVG của bạn sau đó sẽ trở thành yếu tố kiểm soát:

Đặt một thuộc tính viewBox="0 0 width height" (tính bằng pixel) trên yếu tố <svg> của bạn và loại bỏ nó width và height thuộc tính. Bạn cũng cần đặt preserveAspectRatio="xMinYMid" (x/theo chiều dọc bên trái, y/ngang theo chiều ngang) trên phần tử svg. Điều này làm việc với Internet Explorer 10 và 11, ít nhất.

<svg viewbox="0 0 64 64" 
    preserveAspectRatio="xMinYMid"> 
    … </svg> 

Tìm hiểu thêm về các thuộc tính preserveAspectRatio và viewBox. Nguồn, “Getting started with SVG” in the IEblog.

Answer 2

Hóa ra dòng sau có thể biến svg của bạn thành một yếu tố không làm trung tâm:

display: inline-block; 

Tuy không phải là giải pháp lý tưởng nhất nhưng nó hoạt động.

Answer 3

Giải pháp: thử .svg khác, ở đây một số đầu mẫu:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.5, 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="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="500px" height="82px" viewBox="0.5 1000.5 500 82" enable-background="new 0.5 1000.5 500 82" xml:space="preserve"> 

Answer 4

IE 8-11, khi đặt tập tin SVG lên trong một nền với no-repeat, tự động thậm chí-shims bên trái và bên phải để mở rộng cho vừa. Điều đó tạo ra hiệu ứng trung tâm của hình ảnh, ở cấp độ hình ảnh. Có nghĩa là: Nó mở rộng không gian màu trắng trên cả hai mặt của hình ảnh để lấp đầy container.

Hình ảnh mới sau đó là 100% chiều rộng của phần tử. Đây là lý do tại sao vị trí: trái không có hiệu lực, nó đã được trái với đệm bao gồm.

Vùng chứa của phần tử nền phải được hạn chế để ngăn không cho mở rộng quá mức (thông qua làm mờ). Ví dụ: max-width

div#logo{ 
    background-image: url(/img/logo.svg) no-repeat; 
    max-width: 140px; 
    margin: 0 auto auto 0; 
} 

Hình ảnh sẽ vẫn được căn giữa trong 140px, nhưng nó sẽ không còn nổi bật ngoài điểm đó nữa.

Answer 5

Trong trường hợp của tôi, hãy thêm "chiều rộng" & giá trị "chiều cao" đã giải quyết được sự cố trên ie9-11.

Answer 6

Câu trả lời được chấp nhận thực hiện thủ thuật, nhưng đây là một giải pháp khác.

Bao gồm các thứ nguyên trong SVG để chúng giống với kích thước hộp xem thực hiện thủ thuật.

width="496px" height="146px" viewBox="0 0 496 146" 

Nếu bạn thích tôi và bạn chỉnh sửa/lưu SVG trong Illustrator, bỏ chọn hộp kiểm "phản hồi" trong Tùy chọn nâng cao trong hộp thoại lưu. Sau đó, kích thước sẽ được bao gồm.

(Vì nó có thể mở rộng, nên 'đáp ứng' theo định nghĩa. Vì vậy, cài đặt này có vẻ hơi dư thừa.)