2013-07-11 33 views
6

Tôi hiện đang cố gắng vẽ đồ họa bằng svg, khổ giấy là A4, 1 đơn vị logic là 1mm. Vì vậy, tôi đặt chế độ xem là 297mmx210mm, chế độ xem là 297x210. Vấn đề bây giờ là độ rộng nét vẽ của biểu đồ tôi vẽ không còn 1 pixel nữa. Ví dụ:Vẽ biểu đồ có chiều rộng đột quỵ 1 pixel trong bản vẽ khổ A4

<!DOCTYPE html> 
<html> 
<body> 
<svg width="297mm" height="210mm" viewBox='0 0 297 210' style="border: 1px solid #cccccc;"> 
    <path stroke="black" fill="none" stroke-width='1' d='M 10 10 L 60 10'/> 
    <path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30'/> 
    <path stroke="black" fill="none" d='M 10 50 L 60 50'/> 
</svg> 
</body> 
</html> 

3 dòng ở trên có cùng chiều rộng đường thẳng ngay cả khi tôi đặt chiều rộng nét ngang là "1px". Vẫn có thể vẽ đường có chiều rộng 1 pixel trong cài đặt như vậy không?

+0

sẽ stroke-width = '0.762' hoạt động? – Orangepill

+1

tôi không nghĩ rằng giấy có pixel. sử dụng các đơn vị màn hình trên màn hình hoặc in svg và xem các đường mỏng xuất hiện ... – dandavis

+0

theo mặc định 1mm = 3.779527559 pixel, vì vậy nếu tôi đặt stroke-width = '0.26458' thì chiều rộng của đường là 1 pixel. Nhưng đối với dòng thứ hai kể từ khi tôi đã thiết lập chiều rộng đột quỵ là '1px'. Nó phải được vẽ với chiều rộng 1 pixel, phải không? – user2469554

Trả lời

8

Hãy thử điều này:

<path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30' vector-effect="non-scaling-stroke"/> 

vector-effect="non-scaling-stroke" là một SVG 1.2 tính năng Tiny buộc chiều rộng đột quỵ là chính xác những gì bạn chỉ định, không có vấn đề gì nhân rộng, đơn vị biến đổi có hiệu lực. Nó được hỗ trợ bởi FF và Chrome (có thể là những người khác) nhưng không phải là IE (cho đến nay) không may. Nếu bạn có thể sống với điều đó, thì đó là giải pháp đơn giản nhất cho vấn đề của bạn.

+0

Tuyệt vời! Cảm ơn bạn đã giúp đỡ. – user2469554