Evitare la linea tra le forme SVG piastrellate

Question

Sto utilizzando più rettangoli di colori diversi per creare una visualizzazione di dati SVG. Funziona alla grande ma a volte il colore di sfondo scorre tra i rettangoli. Sto navigando con Chrome ma altri browser sembrano interessati in modo simile.

http://jsfiddle.net/dVEPk/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <rect x="10.5" y="10" height="100" width="100" 
      style="stroke:none; fill: #00cc00"/> 
    <rect x="110.5" y="10" height="100" width="100" 
      style="stroke:none; fill: #00cc00"/> 
</svg> 

In Chrome, se compensare i x è un numero intero, la linea non è visibile.

Sono sicuro che posso evitare le linee rendendo i rettangoli un po 'più grandi dello spazio che devono occupare. Ma questo sembra un trucco: esiste un linguaggio SVG o una buona pratica per ottenere forme perfettamente piastrellate senza "malta"?

Sono anche interessato dal rendering delle prestazioni perché le mie visualizzazioni possono essere molto grandi (ad esempio 100 MB XML .svg). Mi piacerebbe essere in grado di dare suggerimenti come "nessuna delle forme in questo <g> si sovrappongono"?

Answer 1

Questo è antialias al lavoro tra la forma e lo sfondo. Se vuoi disattivarlo, imposta shape-rendering = "crispEdges" sulle forme. È possibile impostarlo sugli elementi rect o su <svg> nel qual caso gli elementi rect lo erediteranno.

Potrebbe essere possibile regolare le posizioni della linea aggiungendo 0.5 alle coordinate. Vedere lo cairo FAQ per ulteriori dettagli su questo.