Đường dẫn SVG không được đính kèm dường như bị đóng

Question

Tôi đang viết một số nội dung với d3 và tôi gặp phải một vấn đề kỳ lạ. Đường dẫn được đóng kết thúc bằng ký tự 'Z', nhưng mọi đường dẫn tôi tạo đóng (và điền) bất kể tôi có bao gồm Z hay không. Ngay cả trong sự cô lập với các ví dụ sao chép từ spec này xảy ra. Ví dụ:

<svg> 
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/> 
</svg> 

Tôi hiểu rõ vấn đề có thể là gì. Tôi sẽ đánh giá cao bất kỳ cái nhìn sâu sắc nào.

Answer 1

Dòng có liên quan từ SVG specification, về filling paths:

Các hoạt động điền đầy subpath mở bằng cách thực hiện các hoạt động điền như thể một "closepath" thêm lệnh được thêm vào đường dẫn để kết nối điểm cuối cùng của đường con với điểm đầu tiên của đường phụ.

Vì vậy, theo như điền là có liên quan, có ẩn "Z" ở cuối. Tuy nhiên, đối với cú đánh đột quỵ, không có đóng cửa ngụ ý, do đó, nó sẽ không vẽ đột quỵ kết nối điểm cuối cùng với điểm đầu tiên trừ khi bạn thêm "Z" một cách rõ ràng.

Nếu bạn chỉ muốn áp dụng một cơn đột quỵ, sử dụng CSS để vô hiệu hóa các điền:

path { 
    fill: none; 
    stroke: #000; 
    stroke-width: 1.5px; 
} 

(. Tôi thấy bạn trả lời câu hỏi của riêng bạn, nhưng tôi nghĩ những người khác vẫn có thể tìm thấy một lời giải thích hữu ích)

Answer 2

Tôi đã bỏ phiếu cho câu trả lời, nhưng đôi khi css không phải là một tùy chọn khi bạn cố chuyển đổi svg thành canvas và muốn ngăn đường dẫn svg điền hoặc đóng. Tương đương với giải pháp css nhưng không có css ...

<svg fill="white" fill-opacity="0" stroke="#000" stroke-width="1.5"> 
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/> 
</svg>