タイル張りのSVG図形の間の線を避ける

Question

SVGデータのビジュアライゼーションを構築するために、複数の異なる色の四角形を使用しています。これは矩形の間に偉大だが時にはバックグラウンドカラーブリードが働く。私はChromeでブラウジングしていますが、他のブラウザも同様の影響を受けるようです。クロムで

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> 

xは整数であるオフセット場合、行は表示されません。

私は、矩形を占有するスペースよりも少し大きくすることでラインを避けることができると確信しています。しかし、これはハックのようです：SVGのイディオムやベストプラクティスは、「グラウト」なしで完璧にタイル張りの形を実現するものですか？

視覚化が非常に大きくなる可能性があるため、パフォーマンスをレンダリングすることにも関心があります（例：100MBのXML .svg）。私はこの<g>の形のどれも重複していないようなレンダラのヒントを与えることができますか？

Answer 1

これは、シェイプと背景の間の仕事でアンチエイリアス処理です。それをオフにしたい場合は、シェイプでshape-rendering = "crispEdges"を設定します。 rect要素または<svg>に設定することができます。この場合、rect要素はそれを継承します。

座標に0.5を加えてラインの位置を調整することができます。詳細については、cairo FAQを参照してください。