2013-07-24 60 views
10

Tôi vẽ một biểu đồ thanh sử dụng đa giác bên cạnh nhau như thế này:Liền kề svg: cạnh đa giác không đáp ứng

Nếu bạn nhìn kỹ, có những không gian trắng giữa mỗi đa giác (thu nhỏ) :

tôi cố gắng để ngăn chặn điều này xảy ra. Tôi đã tìm ra thuộc tính SVG shape-rendering và đặt nó thành geometricPrecision. Đây giải quyết vấn đề nhưng đã cho tôi cạnh rất sắc nét:

Tôi không muốn điều đó một trong hai. Tôi đã thử các giá trị khác có thể cho shape-rendering nhưng không có giá trị nào hoạt động tốt. (Tôi đã thử những điều này trên WebKit.) Tôi đang tìm một giải pháp.

Đối với những người quan tâm, jsFiddle của biểu đồ here.

+0

Cảm ơn người đàn ông tip 'hình dựng hình '! Chính xác những gì tôi đang tìm kiếm. Một điều mà bài báo liên kết không lưu ý là bạn cũng có thể sử dụng nó trên các nhóm bên trong SVG, rất tiện dụng nếu bạn có các hình dạng hình học và các phác thảo văn bản (mà bạn * làm * muốn được chống răng cưa) kết hợp. – Rijk

Trả lời

7

Thực sự vấn đề là bạn nên hiển thị biểu đồ dưới dạng đa giác đơn chứ không phải một đa giác cho mỗi thanh, nhưng tôi giả định có lý do bạn làm theo cách này.

Một giải pháp khả thi là đặt thuộc tính đột quỵ, vì vậy đường viền của đa giác được vẽ, khiến chúng bị chồng chéo lên nhau một chút. Bạn có thể thiết lập các thuộc tính đó trên phần tử nhóm để áp dụng chúng cho tất cả các đa giác kèm theo.

<g stroke-width="0.5" stroke="black" stroke-linejoin="round"> 

Updated jsFiddle link

Lưu ý rằng điều này làm cho đồ thị trông hơi biggger hơn nó nên được, nhưng tôi không nghĩ rằng đó là một vấn đề đáng kể.

Vì lý do tại sao nó xảy ra, đó là bởi vì các offset của đa giác của bạn không được căn chỉnh chính xác trên các ranh giới pixel (ít nhất là hầu hết thời gian). Nếu bạn cố định chiều rộng svg ở bội số của 300px (do đó sắp xếp mọi thứ trên ranh giới pixel), khoảng trống sẽ biến mất.

Xem xét một diện tích 4x4 pixel, nơi bạn đang cố gắng để làm cho một hình vuông từ (0,0) đến (2.5,2.5) như thế này:

enter image description here

Bạn có thể vẽ các pixel từ (0 , 0) đến (1,1) bằng màu đen đặc, nhưng làm thế nào để bạn xử lý các cạnh - chúng không hoàn toàn đen và cũng không hoàn toàn trắng. Các giải pháp chống răng cưa là sử dụng một bóng màu xám tỷ lệ thuận với bao nhiêu điểm ảnh được bao phủ.

enter image description here

Nhưng sau đó khi bạn cố gắng và làm cho đa giác khác ngay bên cạnh cái đầu tiên (ví dụ: bắt đầu tại một bù đắp 2,5), bạn sẽ có cùng một vấn đề chống răng cưa cạnh bàn tay trái. Chỉ lần này nó sẽ hơi tối hơn vì nền màu xám hơn là màu trắng.

enter image description here

Như bạn đã tìm thấy, bạn có thể vô hiệu hóa hiệu ứng này bằng cách thiết lập một khác nhau hình rendering tùy chọn, nhưng sau đó bạn sẽ không được hưởng các anti-aliasing trên đường dốc, làm cho những mép trông lởm chởm .

+0

Đúng, thực ra tôi đã lên kế hoạch để thêm hiệu ứng di chuột lên đa giác, đó là lý do tại sao tôi tách chúng ở vị trí đầu tiên thay vì một đa giác lớn duy nhất. Tôi nghĩ rằng điều này sẽ làm các trick. Nhưng tại sao điều này lại xảy ra, bạn có thể trả lời điều đó không? –

+1

@ahmetalpbalkan Tôi đã cập nhật câu trả lời của tôi với một lời giải thích cho lý do tại sao bạn đang nhìn thấy những khoảng trống. –

+0

Nhưng nếu màu xám là hoàn toàn tỉ lệ, nó sẽ có màu xám 50%. Hai màu xám 50% nên kết hợp để tạo ra màu đen 100%. Dường như với tôi rằng hầu hết các trình kết xuất đồ họa thực sự là chống răng cưa đối với nền của đối tượng SVG chứ không phải là những gì hiện có trên canvas SVG. Hoặc là, hoặc các kỹ thuật chống răng cưa không hoàn hảo và không tạo ra 50% màu xám cho đường viền tại x + 0,5 pixel. – trlkly

0

Tôi đã tìm thấy một giải pháp dứt khoát và thanh lịch cho vấn đề này. Chuyển đổi nhiều đa giác của bạn thành một con đường với nhiều đoạn:

<script src="http://d3js.org/d3.v3.min.js"></script> 
<svg width="100%" height="30%" viewBox="0 0 100 100" preserveAspectRatio="none"> 
     <path d="M0,100 0,70 3.3333333333333335,66 3.3333333333333335,100 M3.3333333333333335,100 3.3333333333333335,66 6.666666666666667,66 6.666666666666667,100 M6.666666666666667,100 6.666666666666667,66 10,62 10,100 M10,100 10,62 13.333333333333334,57.99999999999999 13.333333333333334,100 M13.333333333333334,100 13.333333333333334,57.99999999999999 16.666666666666664,56 16.666666666666664,100 M16.666666666666664,100 16.666666666666664,56 20,54 20,100 M20,100 20,54 23.333333333333332,40 23.333333333333332,100 M23.333333333333332,100 23.333333333333332,40 26.666666666666668,24 26.666666666666668,100 M26.666666666666668,100 26.666666666666668,24 30,15.999999999999998 30,100 M30,100 30,15.999999999999998 33.33333333333333,13.999999999999996 33.33333333333333,100 M33.33333333333333,100 33.33333333333333,13.999999999999996 36.666666666666664,11.999999999999996 36.666666666666664,100 M36.666666666666664,100 36.666666666666664,11.999999999999996 40,10.000000000000004 40,100 M40,100 40,10.000000000000004 43.333333333333336,10.000000000000004 43.333333333333336,100 M43.333333333333336,100 43.333333333333336,10.000000000000004 46.666666666666664,8.000000000000004 46.666666666666664,100 M46.666666666666664,100 46.666666666666664,8.000000000000004 50,8.000000000000004 50,100 M50,100 50,8.000000000000004 53.333333333333336,6.000000000000002 53.333333333333336,100 M53.333333333333336,100 53.333333333333336,6.000000000000002 56.666666666666664,6.000000000000002 56.666666666666664,100 M56.666666666666664,100 56.666666666666664,6.000000000000002 60,8.000000000000004 60,100 M60,100 60,8.000000000000004 63.33333333333333,10.000000000000004 63.33333333333333,100 M63.33333333333333,100 63.33333333333333,10.000000000000004 66.66666666666666,8.000000000000004 66.66666666666666,100 M66.66666666666666,100 66.66666666666666,8.000000000000004 70,11.999999999999996 70,100 M70,100 70,11.999999999999996 73.33333333333333,13.999999999999996 73.33333333333333,100 M73.33333333333333,100 73.33333333333333,13.999999999999996 76.66666666666667,11.999999999999996 76.66666666666667,100 M76.66666666666667,100 76.66666666666667,11.999999999999996 80,10.000000000000004 80,100 M80,100 80,10.000000000000004 83.33333333333334,11.999999999999996 83.33333333333334,100 M83.33333333333334,100 83.33333333333334,11.999999999999996 86.66666666666667,13.999999999999996 86.66666666666667,100 M86.66666666666667,100 86.66666666666667,13.999999999999996 90,11.999999999999996 90,100 M90,100 90,11.999999999999996 93.33333333333333,4.000000000000002 93.33333333333333,100 M93.33333333333333,100 93.33333333333333,4.000000000000002 96.66666666666667,0 96.66666666666667,100 M96.66666666666667,100 96.66666666666667,0 100,0 100,100 M100,100 100,0 100,0 100,100"/> 
</svg> 

http://jsfiddle.net/313xc6bg/

Nó sẽ không làm việc tuy nhiên nếu bạn muốn áp dụng hiệu ứng khác nhau cho mỗi phân đoạn mặc dù. Trong trường hợp này, cách khắc phục mà tôi nghĩ sẽ là thêm một khoảng trống đủ rộng để che khoảng trắng trong khi vẫn giữ AA.

Ngoài ra, tôi vẫn gặp sự cố với Safari (chỉ) đối với thứ tự của các điểm trong các đa giác khác nhau. Thay đổi thứ tự (tức là chiều kim đồng hồ thành ngược chiều kim đồng hồ) đã khắc phục được sự cố.

Các vấn đề liên quan