Tránh đường giữa các hình SVG lát gạch

Question

Tôi đang sử dụng nhiều hình chữ nhật có màu khác nhau để tạo hình ảnh hóa dữ liệu SVG. Điều này làm việc tuyệt vời nhưng đôi khi màu nền chảy qua giữa các hình chữ nhật. Tôi đang duyệt bằng Chrome nhưng các trình duyệt khác có vẻ bị ảnh hưởng tương tự.

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> 

Trong Chrome, nếu x bù đắp là một số nguyên, dòng không nhìn thấy được.

Tôi chắc chắn tôi có thể tránh các đường bằng cách làm cho hình chữ nhật lớn hơn một chút so với không gian mà chúng phải chiếm. Nhưng điều này có vẻ như một hack: là có một thành ngữ SVG hoặc thực hành tốt nhất để đạt được hình dạng hoàn hảo lát gạch mà không có "vữa"?

Tôi cũng quan tâm bằng cách hiển thị hiệu suất vì hình ảnh của tôi có thể rất lớn (ví dụ: 100MB XML .svg). Tôi muốn có thể đưa ra các gợi ý kết xuất như "không có hình dạng nào trong số <g> này chồng chéo"?

Answer 1

Đây là tính khử răng cưa trong công việc giữa hình và nền. Nếu bạn muốn tắt tính năng này, hãy đặt shape-rendering = "crispEdges" trên các hình dạng. Bạn có thể đặt nó trên các phần tử trực tiếp hoặc trên <svg> trong trường hợp các phần tử trực tiếp sẽ kế thừa nó.

Bạn có thể điều chỉnh vị trí của đường bằng cách thêm 0,5 vào tọa độ. Xem cairo FAQ để biết thêm chi tiết về điều này.