SVG-Fremdobjekt nicht in Chrome angezeigt

Ich habe ein SVG-Element mit einem ForeignObject, das ein div enthält. Dann in meinem js mache ich das:SVG-Fremdobjekt nicht in Chrome angezeigt

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

die erstellt eine Leinwand innerhalb der div. Wenn ich für die beiden Browser am firebug HTML-Code suchen sind:

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>

In Chrom es sogar die div zeigen doesnt. Die Art, wie ich das Div erstellen ist

nodeEnter.append("foreignObject") 
    .attr("width", "20") 
    .attr("height", "20") 
    .attr("x", "10") 
    .attr("y","-10"); 

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox funktioniert, wie ich es erwarte, dass es funktioniert. Aber Chrom nicht. Hat jemand irgendwelche Vorschläge?

Auch ich denke, ein Teil des Problems ist, dass die Chrome-Firebug-HTML-Ausgabe "Foreignobject" zeigt, aber der Firefox zeigt "ForeignObject" die Art, wie ich angehängt.

Quelle

2012-06-25 ßee

Sie müssen einen HTML-Body haben, der das Unterelement von Fremdobjekt ist. Sobald Sie das haben, können Sie alles in den Körper legen.

Quelle

2012-07-13 13:41:39 Demosthenes

Cool @Demosthenes danke es funktionierte. –

Vielleicht lohnt es sich, dies zu aktualisieren, da Chrome anscheinend sein Verhalten geändert hat und das Unterelement jetzt sein muss - seltsamerweise ist Edge egal. Für beide Browser ist kein Namespace erforderlich (andere können jedoch wählerisch sein). – dav1dsm1th

Nur um die Konversation hinzuzufügen, hier ist ein Markup. Chrome und Firefox verhalten sich anders und diese Stil-Tags entfernen die Unterschiede (add to html reset?) Sie brauchen anscheinend keinen HTML-Body so sehr wie den Namespace-Verweis xmlns auf dem Tag, sei es body oder einfach div. Außerdem möchten Sie möglicherweise ein svg switch-Tag zum Testen auf unterstützte Features in Betracht ziehen.

<!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>

Quelle

2016-05-09 20:07:03

SVG-Fremdobjekt nicht in Chrome angezeigt

Antwort

Verwandte Themen