Hình nền lặp lại độc lập theo tỷ lệ trong SVG

Question

Tôi có câu hỏi và tôi hy vọng ai đó có thể giúp tôi. Những gì tôi đang tìm kiếm tương đương với thuộc tính CSS background-repeat trong hình ảnh SVG. Có bất kỳ hack để đạt được lặp lại hình ảnh raster như đầy? Vấn đề ở đây là tôi đang thiết kế một trang web và muốn thử nghiệm với đồ họa SVG để làm cho nó có khả năng mở rộng. Vì vậy, khi người dùng phóng to mọi thứ vẫn hoàn toàn sắc nét. Tuy nhiên, tôi cũng cần kết cấu raster "có nhiều hạt". Bây giờ nếu tôi áp dụng một hình ảnh raster như một kết cấu trong Illustrator và lưu nó như là một SVG, các kết cấu thu phóng cùng với các tập tin và một hạt tinh tế trở thành khối xấu xí của điểm ảnh. Bây giờ tôi đang tìm kiếm một khả năng để lặp lại hình ảnh thay vì mở rộng nó trên zoom. Có ai biết một hack để đạt được điều này?

Một khả năng khác mà tôi nghĩ đến là lấy hình ảnh raster ra khỏi SVG và áp dụng nó làm nền thông qua CSS. Rất tiếc, dường như không có cách nào để ngăn hình nền thu phóng qua CSS hoặc JavaScript. Mà làm cho cảm giác hoàn hảo bởi vì bất cứ ai làm như vậy trên các yếu tố nội dung chắc chắn sẽ đi đến địa ngục tiếp cận.

Answer 1

Xem SVG Patterns. Tôi tin rằng bạn có thể sử dụng patternUnits và patternContentUnits để đạt được hành vi độc lập về thu phóng của mình nhưng chưa xác minh điều này.

Answer 2

Tôi có thể thực hiện công việc này bằng cách sử dụng các giá trị kích thước nền được đặt bằng ems thay vì tỷ lệ phần trăm. Tôi đã tạo SVG ở kích thước lớn hơn (30px x 90px) và giảm kích thước xuống kích thước mục tiêu bằng ems.

body { 
    font-size: 15px; 
    background: #fff url(stripe_pattern.svg) repeat-x left top; 
    -webkit-background-size: 0.5em, 0.5em; 
    -moz-background-size: 0.5em, 0.5em; 
    -o-background-size: 0.5em, 0.5em; 
    background-size: 0.5em, 0.5em; 
} 

Điều đó ít nhất là phù hợp với trình duyệt hiện đại. IE có thể rơi trở lại trên các phiên bản raster.