1. Dom
  2. Pytanie i odpowiedź
  3. Czy istnieje odpowiednik spritingu dla obrazów SVG na stronach internetowych?

Czy istnieje odpowiednik spritingu dla obrazów SVG na stronach internetowych?

2010-10-28 8 views
9

Obrazy SVG nie są mapami bitowymi, więc (o ile czegoś mi nie brakuje) nie można wykonywać repetycji, jak w przypadku innych plików obrazów używanych na stronach internetowych (patrz http://www.alistapart.com/articles/sprites).Czy istnieje odpowiednik spritingu dla obrazów SVG na stronach internetowych?

Ale czy istnieje równoważny mechanizm wyświetlania tylko części obrazu SVG jako tła CSS?

E.g. wyimaginowany składnia:

div.my-special-svg-div { 
    background-image: url(sprite-image.svg#one-shape-in-the-svg-file); 
}

Źródło

2010-10-28 Paul D. Waite

Odpowiedz

9

Można użyć "tradycyjnych" technik spriterzy CSS, aby podzielić obrazy SVG z położeniem w tle, here's a quick example, choć robi się trochę mylące, jeśli zacznie się również używać rozmiaru tła. To chyba łatwiejsze, jeśli zdefiniować rozmiar na SVG obrazka:

<svg version="1.1" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    width="320" 
    height="240" 
    viewBox="0 0 320 240">

Źródło

2010-10-28 22:45:01 robertc

4

Jedno podejście Próbowałem, że nie jest Przekształcanie w duszki, ale osiąga podobne cele, ma zawierać obrazów SVG URL zakodowane bezpośrednio w pliku CSS, za pomocą URI danych.

E.g.

background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20fill%3D%22%23CCD%22%20%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%0A%20%20%3Crect%20fill%3D%22%23039%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%221em%22%2F%3E%0A%3C%2Fsvg%3E);

(Zobacz http://intertwingly.net/blog/2008/09/07/SVG-via-CSS)

Tak, wszystkie obrazy SVG skończyć w pliku CSS. Gzipp powinien całkiem zgrabnie zgnieść wiele plików SVG w jednym pliku CSS.

O ile mogę powiedzieć, powyższy CSS działa w Operze 9.5+, IE 9 beta, Safari 5 i Chrome 6. Wydaje się nie działać w Firefoksie od wersji 3.6 lub wcześniejszych innych przeglądarek .

Źródło

2010-10-28 14:50:58

+1

Zauważ, że to będzie działać w Firefox 4.0 wersji beta: https: // Bugzilla. mozilla.org/show_bug.cgi?id=231179 – robertc

+0

Interesująca dyskusja na temat możliwego tryskania za pomocą identyfikatorów w komentarzach tam, od około https://bugzilla.mozilla.org/show_bug.cgi?id=231179#c38 –

+0

Tak, po I "Próbowałem tego, myślałem, że warto go podnieść;) BTW, możesz użyć" tradycyjnych "technik sprite CSS, aby podzielić obrazy SVG z położeniem tła ale staje się nieco mylące, jeśli zaczniesz także używać rozmiaru tła. – robertc

-12

SVG nie jest nawet technicznie obsługiwany przez standardy W3C. Nie zadziała nawet w IE bez wtyczki. Może znajdziesz trochę niejasną wtyczkę Mozilli, która pozwala ci to zrobić, ale o ile wiem, Twój kod nie zostanie zatwierdzony.

Źródło

2010-10-28 15:01:44 Yserbius

+0

"SVG nie jest technicznie wspierany przez standardy W3C." - Jak masz na myśli? [It * is * a W3C standard] (http://www.w3.org/TR/2003/REC-SVG11-20030114/). –

+0

"Nie zadziała nawet w IE bez wtyczki." - Wygląda na to, że pracuję w IE 9 beta bez wtyczki, jak już powiedziałem. –

+0

"ponieważ wiem, że twój kod nie zostanie zatwierdzony" - który kod? CSS, który umieściłem powyżej, sprawdza się poprawnie. –

Powiązane problemy

 Powiązane problemy