SVG foreignObject non visualizzato in Chrome

Ho un elemento SVG con un ForeignObject che contiene un div. Poi, nel mio js faccio questo:SVG foreignObject non visualizzato in Chrome

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

che crea una tela all'interno del div. Quando guardo il codice html Firebug per i due browser sono:

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 Chrome che pretende molto anche mostrare il div. Il modo in cui creo il div è

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

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

Firefox funziona come mi aspetto di lavorare. Ma il cromo no. Qualcuno ha qualche suggerimento?

Inoltre, penso che parte del problema è che l'output HTML firebug di Chrome mostra "foreignobject" ma Firefox mostra "foreignObject" come ho aggiunto.

fonte

2012-06-25 ßee

È necessario disporre di un corpo HTML come sub-elemento di foreignobject. Una volta che hai puoi mettere tutto dentro il corpo.

fonte

2012-07-13 13:41:39 Demosthenes

Cool @Demosthenes grazie ha funzionato. –

Potrebbe valere la pena aggiornarlo poiché Chrome sembra aver cambiato il suo comportamento e l'elemento secondario ora deve essere spostato - stranamente Edge non si cura in alcun modo. Nessuno spazio dei nomi è necessario per entrambi i browser (ma altri potrebbero essere ancora schizzinosi). – dav1dsm1th

Solo per aggiungere alla conversazione, ecco alcuni commenti. Chrome e Firefox si comportano in modo diverso e questi tag di stile hanno rimosso le differenze (aggiungi a html reset?) A quanto pare non è necessario un corpo HTML tanto quanto lo xmlns di riferimento dello spazio dei nomi sul tag, sia body o semplicemente div. Inoltre, probabilmente vorrai prendere in considerazione un tag svg switch per verificare le funzionalità supportate.

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

fonte

2016-05-09 20:07:03

SVG foreignObject non visualizzato in Chrome

risposta

Problemi correlati