Đây là một điều hơi bí truyền, tôi chỉ cần tự làm một lần và thấy nó khó hiểu nên tôi nghĩ mình sẽ làm cả một video về nó.
Vấn đề là, không phải tất cả mọi thứ đều là một trong SVG. thật tuyệt vời vì nó có thể là bất cứ thứ gì. Nhưng cú pháp của nó phức tạp hơn một chút so với bất kỳ hình dạng nào khác. Vì vậy, (có thể vì lý do đó?) Illustrator luôn xuất các hình dạng trong SVG với phần tử phù hợp nhất. Hình chữ nhật là , các hình dạng khác chỉ tạo thành từ các đường thẳng là a , hoặc nếu đó là hình mở a , v.v.
Điều đó sẽ ổn thôi, ngoại trừ các phương thức DOM cho những hình dạng đó khác nhau. Phần tử đường dẫn có một phương thức được gọi là phương thức getTotalLength()cho phép bạn biết đường dẫn dài bao nhiêu. Điều đó khá tuyệt và đôi khi hữu ích, nhưng bạn không thể chỉ làm điều đó trên một , không yếu tố nào khác.
Một lý do khiến bạn có thể muốn biết chiều dài đó là vì bạn định làm động nó để hình dạng “tự vẽ” - một hiệu ứng thiết kế nhỏ thú vị (bộ sưu tập các ví dụ). Bạn có thể làm điều đó trong CSS, nhưng thật tuyệt khi sử dụng một số JavaScript để áp dụng CSS đó để nó tạo hoạt ảnh cho khoảng cách hoàn hảo mọi lúc.
Vì vậy, giả sử bạn muốn thực hiện hiệu ứng vẽ đó, nhưng hình dạng là một nên JavaScript không thành công. Bạn có thể biến đa giác đó thành một đường dẫn, mà không cần thay đổi nó một cách trực quan, bằng cách chỉ cần thêm một điểm vào nó có tay cầm bezier. Như trong, hãy nhấp bằng công cụ Pen và kéo để các tay cầm đi ra và căn chỉnh các chốt ngay dọc theo đường đã có. Sự tồn tại của điểm đó sẽ làm cho nó trở thành đầu ra.
Nếu bạn làm điều này nhiều, có một công cụ gọi là Poly2Path hoạt động và không yêu cầu điểm thừa đó.