Vì vậy, SVG có cái này stroke-miterlimit thuộc tính trình bày. Bạn có thể đã nhìn thấy nó khi xuất SVG từ một chương trình soạn thảo đồ họa hoặc có thể bạn phát hiện ra rằng mình có thể xóa nó mà không nhận thấy bất kỳ thay đổi nào về hình thức trực quan.
Sau rất nhiều nghiên cứu, một trong những điều đầu tiên tôi phát hiện ra là thuộc tính này hoạt động cùng với stroke-linejoinvà tôi sẽ chỉ cho bạn cách cũng như nhiều điều khác mà tôi đã học được về thuộc tính SVG thú vị (và có thể bị bỏ qua) này.
TLDR;
stroke-miterlimit phụ thuộc vào stroke-linejoin: nếu chúng ta sử dụng round or bevel để tham gia thì không cần phải khai báo stroke-miterlimit. Nhưng nếu chúng ta sử dụng miter thay vào đó, chúng ta vẫn có thể xóa nó và có thể giá trị mặc định là đủ. Hãy lưu ý rằng nhiều biên tập viên phần mềm đồ họa sẽ thêm thuộc tính này ngay cả khi không cần thiết.
Là gì stroke-linejoin?
Tôi biết, thực ra chúng ta ở đây để nói về stroke-miterlimit, nhưng tôi muốn bắt đầu với stroke-linejoin bởi vì họ làm việc cùng nhau chặt chẽ như thế nào. Đây là định nghĩa cho stroke-linejoin được kéo thẳng từ Nhóm làm việc SVG (SVGWG):
stroke-linejoinchỉ định hình dạng sẽ được sử dụng ở các góc của đường dẫn hoặc hình dạng cơ bản khi chúng được vuốt.
Phương tiện này chúng ta có thể xác định góc trông như thế nào khi hai đường thẳng gặp nhau tại một điểm. Và thuộc tính này chấp nhận năm giá trị có thể, mặc dù hai trong số đó có không triển khai trình duyệt và được xác định bởi thông số kỹ thuật là có nguy cơ bị rơi. Vì vậy, tôi sẽ trình bày ngắn gọn ba giá trị được hỗ trợ mà thuộc tính này chấp nhận.
miter là giá trị mặc định và nó tình cờ là thứ quan trọng nhất trong ba thứ chúng ta đang xem xét. Nếu chúng ta không tuyên bố rõ ràng stroke-linejoin trong mã SVG thì miter được sử dụng để định hình góc của một con đường. Chúng tôi biết một sự tham gia được thiết lập để miter khi cả hai cạnh gặp nhau ở một góc nhọn.
Nhưng chúng ta cũng có thể chọn round giúp làm mềm các cạnh bằng — bạn đoán rồi đấy — các góc tròn.
Sản phẩm bevel trong khi đó, giá trị tạo ra một cạnh phẳng trông giống như một góc bị cắt.
Là gì stroke-miterlimit?
Được rồi, bây giờ chúng ta đã biết điều gì stroke-linejoin là, chúng ta hãy quay lại chủ đề hiện tại và tách ra định nghĩa về stroke-miterlimit từ cuốn sách Sử dụng SVG với CSS3 và HTML5:
[…] Ở những góc thật hẹp, bạn phải kéo dài nét vẽ một khoảng khá xa, trước khi hai cạnh gặp nhau. Vì lý do đó, có một thuộc tính phụ:
stroke-miterlimit. Nó xác định khoảng cách bạn có thể mở rộng điểm khi tạo góc vát.
Nói cách khác, stroke-miterlimit đặt khoảng cách của các cạnh trước khi chúng có thể gặp nhau tại một điểm. Và chỉ khi stroke-linejoin is miter.
Vì vậy, stroke-miterlimit giá trị có thể là bất kỳ số nguyên dương nào, trong đó 4 là giá trị mặc định. Giá trị càng cao, hình dạng góc càng được phép đi xa hơn.
Cách họ làm việc cùng nhau
Bây giờ bạn có thể đã có một sự hiểu biết khái niệm tốt về cách stroke-linejoin và stroke-miterlimit làm việc cùng nhau. Nhưng tùy thuộc vào stroke-miterlimit giá trị, bạn có thể nhận được một số kết quả có vẻ kỳ quặc.
Trường hợp cụ thể: nếu stroke-linejoin được thiết lập để miter, nó thực sự có thể trông giống như bevel thay vào đó là giá trị khi giới hạn góc vát quá thấp. Đây là thông số kỹ thuật một lần nữa để giúp chúng tôi hiểu lý do:
Nếu chiều dài góc vát chia cho chiều rộng hành trình vượt quá giới hạn
stroke-miterlimitthì [cáimitervalue] được chuyển đổi thành góc xiên.
Vì vậy, về mặt toán học, chúng ta có thể nói rằng:
[miter length] / [stroke width] > [stroke-miterlimit] = miter
[miter length] / [stroke width] < [stroke-miterlimit] = bevelĐiều đó có ý nghĩa, phải không? Nếu góc vát không thể vượt quá chiều rộng của nét thì đó phải là cạnh phẳng. Nếu không, góc vát có thể phát triển và tạo thành một điểm.
Đôi khi nhìn thấy là tin tưởng, vì vậy đây là Ana Tudor với một bản demo tuyệt vời cho thấy cách stroke-miterlimit giá trị ảnh hưởng đến SVG stroke-linejoin:
Đặt giới hạn miter trong ứng dụng thiết kế
Bạn có biết rằng các phép nối và giới hạn miter có sẵn trong nhiều ứng dụng thiết kế mà chúng ta sử dụng trong công việc hàng ngày không? Đây là nơi để tìm thấy chúng trong Illustrator, Figma và Inkscape.
Đặt giới hạn miter trong Adobe Illustrator
Illustrator có một cách để sửa đổi giá trị góc nhọn khi định cấu hình nét của đường dẫn. Bạn có thể tìm thấy nó trong cài đặt “Stroke” trên một đường dẫn. Lưu ý cách - đúng với thông số kỹ thuật - chúng tôi chỉ có thể đặt giá trị cho “Giới hạn” khi “Góc” của đường dẫn được đặt thành “Miter Join”.
Một sắc thái là Illustrator có giới hạn miter mặc định là 10 thay vì mặc định 4. Tôi nhận thấy điều này mỗi khi tôi xuất tệp SVG hoặc sao chép và dán mã SVG thu được. Điều đó có thể gây nhầm lẫn khi bạn mở mã vì ngay cả khi bạn không thay đổi giá trị giới hạn góc cắt, Illustrator vẫn bổ sung thêm stroke-miterlimit="10" nơi bạn có thể mong đợi 4 hoặc có lẽ không stroke-miterlimit ở tất cả.
Và điều đó đúng ngay cả khi chúng ta chọn một cách khác stroke-linejoin giá trị khác ngoài “Miter Join”. Đây là mã tôi nhận được khi xuất SVG bằng stroke-linejoin="round".
<svg viewBox="0 0 16 10"><path stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M0 1h15.8S4.8 5.5 2 9.5" fill="none" stroke="#000"/></svg>Sản phẩm stroke-miterlimit không nên ở đó vì nó chỉ hoạt động với stroke-linejoin="miter". Dưới đây là một số cách giải quyết cho điều đó:
- Đặt giá trị “Giới hạn” thành 4, vì đây là giá trị mặc định trong SVG và là giá trị duy nhất không xuất hiện trong mã.
- Sử dụng tùy chọn “Xuất dưới dạng” hoặc “Xuất cho màn hình” thay vì “Lưu dưới dạng” hoặc sao chép và dán trực tiếp các vectơ.
Nếu bạn muốn thấy điều đó được khắc phục, hãy tham gia cùng tôi và ủng hộ yêu cầu để thực hiện nó.
Đặt giới hạn miter trong Figma
Sự tham gia và giới hạn của Mitre hơi khác một chút trong Figma. Khi chúng ta nhấp vào nút của một góc trên một hình, bên dưới ba dấu chấm của phần Stroke, chúng ta có thể tìm thấy một nơi để đặt điểm nối của một góc. Tùy chọn “Góc cắt góc” xuất hiện theo mặc định, nhưng chỉ khi phép nối được đặt thành góc cắt:
Phần này hoạt động tương tự như Illustrator ngoại trừ cách Figma cho phép chúng ta đặt góc vát theo đơn vị độ thay vì giá trị thập phân. Có một số sắc thái cụ thể khác cần chỉ ra:
- Góc này theo mặc định là 7.17° và không có cách nào để đặt giá trị thấp hơn. Khi xuất SVG, giá trị đó sẽ trở thành
stroke-miterlimit='16' trong phần đánh dấu, khác với cả thông số SVG và mặc định của Illustrator. - Giá trị tối đa là 180° và khi vẽ bằng tùy chọn này, đường nối sẽ tự động chuyển sang chế độ xiên.
- Khi xuất bằng phép nối góc xiên,
stroke-miterlimitcó trong mã nhưng nó giữ giá trị được đặt khi góc vát được kích hoạt lần cuối (Illustrator thực hiện tương tự). - Khi xuất SVG bằng phép nối tròn, đường dẫn được mở rộng và chúng ta không còn có nét nữa mà là đường dẫn có màu tô.
Tôi không thể tìm ra cách tránh mã bổ sung xuất hiện trong SVG đã xuất khi stroke-miterlimit là không cần thiết.
Đặt giới hạn miter trong Inkscape
Inkscape hoạt động chính xác theo cách mà tôi mong đợi một ứng dụng thiết kế sẽ quản lý các giới hạn và kết nối miter. Khi chọn tham gia miter, giá trị mặc định là 4, chính xác những gì nó có trong thông số kỹ thuật. Tốt hơn nữa, stroke-miterlimit bị loại trừ khỏi mã SVG đã xuất khi đó là giá trị mặc định!
Tuy nhiên, nếu chúng ta xuất bất kỳ đường dẫn nào có góc xiên hoặc hình tròn sau khi giới hạn được sửa đổi, stroke-miterlimit sẽ quay lại mã, trừ khi chúng tôi giữ 4 đơn vị mặc định trong hộp Giới hạn. Thủ thuật tương tự như Illustrator.
Những ví dụ này sẽ hoạt động tốt nếu chúng ta chọn Save As → SVG được tối ưu hóa lựa chọn. Inkscape là nguồn mở và miễn phí, xét cho cùng thì nó có mã gọn gàng nhất cho đến nay. stroke-miterlimit đi và nhiều tùy chọn để tối ưu hóa mã để xuất.
Nhưng nếu bạn quen thuộc hơn với Illustrator (giống như tôi), thì có một cách giải quyết khác cần ghi nhớ. Figma, do các đơn vị độ và sự mở rộng của các nét, có cảm giác như càng xa các thông số kỹ thuật và hành vi mong đợi.
Kết thúc
Và đó là những gì tôi học được về SVG stroke-miterlimit thuộc tính. Đó là một trong những điều dễ bị bỏ qua mà chúng ta có thể thấy mình cắt bỏ một cách mù quáng, đặc biệt khi tối ưu hóa tệp SVG. Vì vậy, bây giờ khi bạn thấy mình đang thiết lập stroke-miterlimit bạn sẽ biết nó làm gì, nó hoạt động như thế nào stroke-linejoinvà tại sao bạn lại có thể có được một đường nối vát khi đặt giá trị giới hạn góc xiên.
