Obraz Svg nie jest wyświetlany w przeglądarce Firefox

Wewnątrz prostego elementu SVG mam obraz.Obraz Svg nie jest wyświetlany w przeglądarce Firefox

Chrome: Wersja 28. - działa idealnie
Firefox: 22,0 - nie obraz jest rysowany
Opera: 12.16 - obraz jest pokazać 4 razy większa niż normalnie

Kod:

 
    <svg width="500px" height="500px" viewBox="0 0 70 70"> 
     <image x="0" y="0" width="10" height="10" 
       id="knight" xlink:href="/images/knight.svg" /> 
    </svg>

Źródło

2013-07-17 Chirila Alexandru

Plik Knight.svg: https://docs.google.com/file/d/0B4duJ7F-vg_fWFh0c2dGRnpERWc/edit?usp=sharing –

To jest obraz svg, sprawdź link w moim drugim komentarzu. Możesz otworzyć go za pomocą edytora tekstu i zobaczyć zawartość svg. –

Twój SVG nie jest skalowany w celu dopasowania do 10x10 obrazu prostokąt, ponieważ nie ma viewBox. Replikatory SVG muszą znać wymiary zawartości SVG, aby wiedzieć, jak ją skalować. Do tego służy atrybut viewBox.

Spróbuj dodać następujące elementy do elementu root <svg> w knight.svg.

viewBox="0 0 45 45"

Musisz również zdefiniować przestrzenie nazw dla svg i xlink. Chociaż być może właśnie usunąłeś te dla jasności (?).

Źródło

2013-07-18 08:08:40

Dzięki, działało idealnie. I tak, usunąłem przestrzenie nazw dla jasności. –

Twój rycerz ma rozmiar 45 x 45 pikseli. Piksele w lewym górnym rogu (10 x 10) są puste.

Pytasz o to, czy obraz ma być wyświetlany w lewym górnym rogu znaczników <image>, więc Firefox poprawnie pokazuje, ponieważ nic tam nie ma.

Jeśli chcesz zobaczyć rycerza, ustaw szerokość i wysokość <image>, aby pasowały do wymiarów rycerza.svg.

Ani Chrome ani Opera wydaje się wyświetlić obraz poprawnie

An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’

Źródło

2013-07-18 07:22:26

Obraz Svg nie jest wyświetlany w przeglądarce Firefox

Odpowiedz

Powiązane problemy