Niezależne od skali powtórzenie obrazów tła w SVG

Question

Mam pytanie i mam nadzieję, że ktoś może mi pomóc. To, czego szukam, to odpowiednik właściwości CSS background-repeat w obrazach SVG. Czy jest jakiś hack, aby powtórzyć obrazy rastrowe jako wypełnienia? Chodzi o to, że projektuję stronę internetową i chcę eksperymentować z grafiką SVG, aby była skalowalna. Tak więc, gdy użytkownik przybliża wszystko, pozostaje idealnie ostry. Jednak potrzebuję również "ziarnistych" tekstur rastrowych. Teraz, jeśli zastosuję obraz rastrowy jako teksturę w programie Illustrator i zapiszę go jako SVG, tekstury powiększą się wraz z plikiem, a subtelne ziarno stanie się brzydkimi blokami pikseli. Teraz szukam możliwości powtórzenia obrazu zamiast skalowania go przy powiększeniu. Czy ktoś zna hack, aby to osiągnąć?

Inną możliwością, o której myślałem było usunięcie obrazu rastrowego z SVG i zastosowanie go jako tła za pomocą CSS. Niestety nie ma sposobu, aby zapobiec powiększaniu obrazu tła przez CSS lub JavaScript. To ma sens, ponieważ każdy, kto robi to z elementami treści, z pewnością trafi do piekła dostępności.

Answer 1

Zobacz SVG Patterns. Wydaje mi się, że można użyć funkcji patternUnits i patternContentUnits, aby uzyskać niezależne od zoomu zachowanie, ale nie zweryfikowano tego.

Answer 2

Udało mi się to zrobić, używając wartości wielkości tła ustawionych w ems, a nie w procentach. Stworzyłem SVG w większym rozmiarze (30 x 90 pikseli) i przeskalowałem go do rozmiaru docelowego za pomocą 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; 
} 

To przynajmniej działa w nowoczesnych przeglądarkach. IE może odwołać się do wersji rastrowych.