SVG foreignObject nie wyświetla się w Chrome

Mam element SVG z obiektem foreignObject, który zawiera element div. Następnie w moim js robię to:SVG foreignObject nie wyświetla się w Chrome

$("#wrapper>svg>foreignObject>div").sparkline(data);

który tworzy płótno w ramach div. Kiedy patrzę na kod html Firebug dla dwóch przeglądarki to:

Firefox:

<svg> 
    <foreignObject width="20" height="20" x="10" y="-10"> 
     <div> 
      <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas> 
     </div> 
    </foreignObject> 
</svg>

Chrome:

<svg> 
    <foreignobject width="20" height="20" x="10" y="-10"/> 
<svg>

w Chrome to nie robi nawet pokazać div. Sposób tworzenia elementu div to Firefox działa tak jak oczekuję, że zadziała. Ale chrom nie. Czy ktoś ma jakieś sugestie?

Sądzę, że częścią problemu jest to, że wynik HTML chrome firebug pokazuje "foreignobject", ale Firefox pokazuje "foreignObject" w taki sposób, w jaki został dodany.

Źródło

2012-06-25 ßee

Musisz mieć treść HTML będącą podelementem obiektu obcego. Kiedy już to zrobisz, możesz umieścić wszystko w ciele.

Źródło

2012-07-13 13:41:39 Demosthenes

Fajne @Demosthenes dzięki to działało. –

Może warto byłoby to zaktualizować, ponieważ wydaje się, że Chrome zmienił swoje zachowanie, a element podrzędny musi być teraz opakowany - dziwnie Edge nie dba o to w żaden sposób. W obu przeglądarkach nie jest wymagana przestrzeń nazw (ale inne mogą być nadal wybredne). – dav1dsm1th

Aby dodać do rozmowy, oto kilka znaczników. Chrome i Firefox zachowują się inaczej, a te znaczniki stylu usuwają różnice (dodaj do resetowania html?). Najwyraźniej nie potrzebujesz korpusu HTML tak bardzo, jak xmlns odniesienia do przestrzeni nazw w tagu, czy to body czy po prostu div. Prawdopodobnie warto rozważyć tag svg switch, aby przetestować obsługiwane funkcje.

<!doctype html><html><body> 

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px"> 
    <foreignObject width="100" height="57"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style="position:relative; 
     width:100px;height:57px;overflow:hidden;font-family:Arial; 
     font-weight:400;font-size:12px;line-height:100%;"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod 
      tempor incididunt ut labore 
    </div> 
    </foreignObject> 
</svg> 

</body></html>

Źródło

2016-05-09 20:07:03

SVG foreignObject nie wyświetla się w Chrome

Odpowiedz

Powiązane problemy