Tại sao chiều rộng đột quỵ SVG: 1 tạo đường trong suốt?

Question

Tôi đang tạo biểu đồ chứng khoán với svg và tôi đang gặp sự cố khi tôi đặt chiều rộng đột quỵ của các phần tử đường dẫn thành 1. Thay vì làm cho các đường hẹp hơn, nó chỉ làm cho nó có cùng kích thước với chiều rộng nét : 2 nhưng hơi trong suốt. Tôi không thể gửi một hình ảnh của nó mặc dù bởi vì tôi không có đủ điểm danh tiếng ...

thẻ svg của tôi trông giống như vậy:

<div style="height:300px; width:400px; overflow:hidden"> 
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
</svg> 
</div> 

Và tôi thêm yếu tố con đường tự động sử dụng javascript/jquery:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
$(shape).attr({"d":"...", 
       "fill":"none", 
       "stroke":color, 
       "stroke-width":"1"}); 
$("svg").append(shape); 

Tôi đã để lại giá trị cho thuộc tính của đường dẫn là thuộc tính dài như vậy. Ngoài ra, color là một biến chuỗi được xác định trước bàn tay là "xanh lục", "đỏ" hoặc "đen".

Có điều gì đó sai trong mã của tôi đang gây ra sự cố này hay đây có phải là vấn đề khác không?

Answer 1

Điều này có thể là do tính năng chống răng cưa được áp dụng trong hầu hết các lần triển khai SVG. Khi chiều rộng của đường đi gần hoặc dưới 1, việc chống răng cưa làm cho nó sao cho các pixel được bao phủ một nửa được hiển thị một phần mờ đục. Với các biến đổi và chế độ xem mặc định tại chỗ, đường một pixel của bạn có thể nằm chính xác trên đường viền giữa hai pixel vật lý, vì vậy chúng được bao phủ một nửa, dẫn đến độ trong suốt 50% tổng thể. Với một đường màu đen trên nền trắng, điều này mang lại một màu xám 50%.

Answer 2

Nếu các đường thẳng nằm ngang hoặc thẳng đứng, chỉ cần đặt các đường ở một nửa pixel, như x="1.5px".

Một cách khác là áp dụng một số CSS cho các dòng:

.thelines{ 
    shape-rendering:crispEdges 
} 

The spec chapter on shape-rendering property.

Answer 3

lẽ muộn một chút, nhưng lý do thực sự của việc này là khi bạn vẽ trên một mạng lưới trực tuyến đó là vô hạn nhỏ dòng với chiều rộng đột quỵ 1 được hiển thị dưới dạng một nửa pixel trái và phải (hoặc trên/dưới) từ đường lưới. Tôi giải quyết điều này bằng cách thêm một nhóm xung quanh tất cả các đối tượng với biến đổi 0,5,0,5 vì vậy tất cả mọi thứ được chuyển một đường lưới nửa.

Vì vậy, mọi thứ bạn vẽ bây giờ chính xác ở giữa 2 đường lưới. Một đường với chiều rộng đột quỵ 1 wil bây giờ có nửa pixel ở bên trái và nửa pixel ở bên trái, nhưng cả hai ở giữa. Kết quả là phù hợp với chính xác độ dày bạn muốn: 1 pixel ...

Ví dụ:

<g transform="translate(0.5,0.5)"> 
<g> 
    <path /> 
    <path /> 
</g> 
<g> 
    <path /> 
    <path /> 
</g> 
</g> 

Answer 4

Câu trả lời bởi user616586 có vẻ tốt đẹp.

Vấn đề tôi thấy là các đường không có cùng khoảng cách với tâm của hình vì một trong số chúng được bù đắp bằng 1 px. Trong hầu hết các tình huống có thể chấp nhận được, nhưng đôi khi nó không phải là.

Một tùy chọn khác:

• sử dụng một đột quỵ-chiều rộng của 2px (đã 1px thực hiện bên ngoài và 1px render bên trong hình dạng)
• áp dụng các hình dạng để chính nó như là một clip-đường dẫn (loại bỏ rendering của 1px bên ngoài)

Answer 5

sửa chữa:

<line 
    x1="10" y1="1" 
    x2="90" y2="1.0001" // hack: horizontal line in SVG not visible in Chrome 
    stroke="#FF0000" 
    strokeWidth="1"/> 

Ref: http://code.tonytuan.org/2016/09/svg-horizontal-line-not-visible-in.html

Answer 6

Nếu D3js của nó sau đó thử thêm bên dưới thuộc tính style để yếu tố d3 của bạn:

.style('shape-rendering','crispEdges') 

Điều này làm cho dòng mỏng hơn.

Nếu bạn muốn đạt được cùng với CSS, sau đó thêm các phong cách dưới đây:

.the_Line_CLass{ 
    shape-rendering: crispEdges; 
}