SVG xếp chồng gây ra biến dạng

Question

Tôi đang cố gắng ra SVG stacking technique để cho phép nhiều biểu tượng xếp chồng lên nhau trong một tập tin duy nhất, chỉ cần một yêu cầu HTTP đơn từ trình duyệt. Kỹ thuật này được mô tả khá kỹ lưỡng here. Về cơ bản, ý tưởng là bạn đặt nhiều phần tử SVG vào một tệp SVG duy nhất và sử dụng kiểu dáng CSS để ẩn tất cả các biểu tượng, ngoại trừ biểu tượng bạn hiện muốn hiển thị. Bạn chọn biểu tượng bạn muốn hiển thị bằng cách sử dụng bộ chọn CSS :target.

Kỹ thuật này hoạt động đối với tôi, ngoại trừ xếp chồng nhiều biểu tượng gây méo mó lạ trong biểu tượng được hiển thị, mặc dù tất cả các biểu tượng khác đều bị ẩn.

Trong ví dụ tôi đang làm việc, tôi đơn giản hóa việc này để chỉ xếp hai biểu tượng: biểu tượng cờ Mỹ và biểu tượng lá cờ Vương quốc Anh.

Các tập tin (đơn giản) SVG là:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 

<svg id="svg153" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> 

    <svg:style 
     xmlns:svg="http://www.w3.org/2000/svg" type="text/css"> 
     .i { display: none; } 
     .i:target { display: block; } 
    </svg:style> 

    <svg:svg id="uk" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1"> 
     <!-- SVG elements to draw UK flag --> 
    </svg:svg> 

    <svg:svg id="us" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1"> 
     <!-- SVG elements to draw US flag --> 
    </svg:svg> 
</svg> 

Lưu ý rằng CSS được nhúng trong tập tin SVG, trong một phần tử <svg::style>. CSS đơn giản là:

.i { display: none; } 
.i:target { display: block; } 

Bằng cách này, bất kỳ yếu tố svg::svg với class="i" là tự động vô hình, trừ khi chúng ta nhắm tới nó trong url SVG. Vì vậy, theo cách này, để hiển thị một biểu tượng lá cờ Mỹ, tôi sẽ sử dụng đoạn mã HTML sau:

<img 
    src="flags.svg#us" 
    width="80" 
    height="60" 
    alt="SVG Stacked Image" 
/> 

Và tất nhiên, để hiển thị cờ Anh tôi sẽ thay đổi nó để src="flags.svg#uk"

Dù sao, tất cả điều này hoạt động tuyệt vời ... ngoại trừ một biến dạng hình ảnh lạ xảy ra trong cả Firefox và Chrome khi tôi xếp chồng hình ảnh.

Dưới đây là một ảnh chụp màn hình của lá cờ Mỹ khi tôi tháo (ẩn) Anh cờ từ tập tin SVG:

Như bạn thấy, có vẻ tốt.

Nhưng khi tôi ngăn xếp nó ở phía trước của lá cờ Anh, nó trông giống như:

Như bạn thấy, hình ảnh trở nên méo mó lạ - nó gần như trông giống như những gì xảy ra với một thu nhập thấp chất lượng JPEG khi bạn nhận được rất nhiều "hiện vật" trong hình ảnh nén.

Vậy tại sao chính xác điều này xảy ra? Các hình ảnh khác xếp chồng lên nhau với biểu tượng lá cờ Mỹ đều vô hình, vậy tại sao chúng lại ảnh hưởng đến biểu tượng nhìn thấy được?

Tôi Googled xung quanh rất nhiều tìm kiếm câu trả lời, và mặc dù chắc chắn có nhiều vấn đề và "gotchas" với kỹ thuật xếp chồng SVG, tất cả đều liên quan đến khả năng tương thích giữa các trình duyệt. Tuy nhiên, kỹ thuật này hoạt động tốt trên hầu hết các trình duyệt mới hơn và bao gồm IE9. Ngoài ra, sự biến dạng xảy ra trong cả Firefox và Chrome, vì vậy đây không phải là một số vấn đề liên quan đến trình duyệt, mà là điều tôi đang làm sai.

Vì vậy, điều gì gây ra sự biến dạng kỳ lạ này khi tôi áp dụng kỹ thuật xếp chồng SVG?

Answer 1

Tôi đã thử với svgs đơn giản của riêng mình và nó hoạt động tốt, không có biến dạng kỳ lạ xảy ra. Vì vậy, tôi đoán đó là svgs của bạn cho uk và chúng tôi.

http://pastebin.com/dxVtTQKF

Answer 2

Không có ý tưởng về xếp chồng và nhắm mục tiêu. Nhưng tôi biết hai phương pháp đơn giản .. có thể là những phương pháp có thể giúp bạn một cách dễ dàng hơn.

1. Khi bạn đã chọn các biểu tượng svg khác nhau từ mạng hoặc thậm chí từ máy tính nhưng mỗi biểu tượng riêng biệt.
   • Có một trang web 'icomoon.io', nơi chúng tôi có thể chọn các biểu tượng khác nhau từ thư viện trực tuyến hoặc biểu tượng svg tùy chỉnh từ máy tính của bạn.
   • Mở 'https://icomoon.io/app/'
   • Chọn 'nhập biểu tượng' để tải lên biểu tượng tùy chỉnh từ máy tính của bạn.
   • Ở cuối trang, có 'Thêm biểu tượng từ thư viện…' để chọn biểu tượng từ thư viện trực tuyến.
   • Từ công cụ 'chọn' (Ở trên cùng), chọn nhiều biểu tượng tùy thích.
   • Sau khi chọn nhiều biểu tượng, hãy chọn nút 'Tạo SVG, PNG, PDF' ở dưới cùng.
   • Sau đó, để kết hợp tất cả chúng trong một tệp, nhấp vào 'biểu tượng cài đặt' nằm ngay bên cạnh tùy chọn 'Tải xuống' ở nút đầu tiên ở dưới cùng bên trái.
   • Chọn 'Bao gồm các lát (CSS Sprite) từ nó.
   • Đặt lề phù hợp và số lượng biểu tượng liên tiếp tùy thích và sau đó tải xuống sprite kết hợp với mã xml của nó trong demo.html và định nghĩa css trong style.css.
2. Khi bạn đã tạo tệp SVG duy nhất của nhiều biểu tượng bằng cách sử dụng 'AI' hoặc bất kỳ phần mềm nào khác.
   • Chỉ cần tải (nhập) tệp đó lên icomoon.io và nhấp vào nút 'Tạo SVG, PNG, PDF' và tải xuống tệp xml sprite.