26

複数の異なる色の長方形を使用して、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>

Chrome では、x オフセットが整数の場合、線は表示されません。

長方形を占有するスペースよりも少し大きくすることで、線を避けることができると確信しています。しかし、これはハックのようです:「グラウト」なしで完全にタイル化された形状を実現するためのSVGイディオムまたはベストプラクティスはありますか?

また、ビジュアライゼーションが非常に大きくなる可能性があるため (100MB の XML .svg など)、レンダリングのパフォーマンスも気になります。<g>「この中の形状はどれも重なっていません」のようなレンダラーのヒントを与えることができるようにしたいですか?

4

1 に答える 1

34

これは、シェイプと背景の間でアンチエイリアシングが機能しています。オフにしたい場合は、形状に shape-rendering="crispEdges" を設定します。rect 要素または のいずれかでそれを設定できます<svg>。その場合、rect 要素はそれを継承します。

座標に 0.5 を追加することで、線の位置を調整できる場合があります。詳細については、cairo FAQを参照してください。

于 2012-10-24T12:38:48.290 に答える