Cách đặt chiều rộng nét ngang: 1 chỉ trên một số mặt hình SVG nhất định?

Question

Đặt chiều rộng nét ngang: 1 trên phần tử <rect> trong SVG đặt một nét trên mỗi cạnh của hình chữ nhật.

Làm cách nào để đặt chiều rộng nét ngang trên ba cạnh của hình chữ nhật SVG?

Answer 1

Bạn không thể thay đổi kiểu trực quan của các phần khác nhau của một hình dạng trong SVG (không có mô-đun Vector Effects chưa có sẵn). Thay vào đó, bạn sẽ cần phải tạo các hình dạng riêng biệt cho mỗi nét vẽ hoặc kiểu trực quan khác mà bạn muốn thay đổi.

Cụ thể đối với trường hợp này, thay vì sử dụng một yếu tố <rect> hoặc <polygon> bạn có thể tạo một <path> hoặc <polyline> mà chỉ bao gồm ba mặt của hình chữ nhật:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 --> 
<path d="M50,50 L150,50 150,150 50,150" /> 
<polyline points="50,50 150,50 150,150 50,150" /> 

Bạn có thể thấy hiệu quả của các hành động ở đây : http://jsfiddle.net/b5FrF/3/

Để biết thêm thông tin, hãy đọc về <polyline> và các hình dạng <path> khó hiểu hơn nhưng khó hiểu hơn.

Answer 2

Bạn có thể sử dụng polyline cho ba cạnh được vuốt và không được đặt nét trên hình chữ nhật. Tôi không nghĩ rằng SVG cho phép bạn áp dụng các nét khác nhau cho các phần khác nhau của đường dẫn/hình dạng, vì vậy bạn cần phải sử dụng nhiều đối tượng để có được hiệu ứng tương tự.

Answer 3

Nếu bạn cần đột quỵ hoặc không đột quỵ thì bạn cũng có thể sử dụng stroke-dasharray để làm điều này, bằng cách làm cho dấu gạch ngang và khoảng trống khớp với các cạnh của hình chữ nhật.

rect { fill: none; stroke: black; } 
 
.top { stroke-dasharray: 0,50,150 } 
 
.left { stroke-dasharray: 150,50 } 
 
.bottom { stroke-dasharray: 100,50 } 
 
.right { stroke-dasharray: 50,50,100 }

<svg height="300"> 
 
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/> 
 
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/> 
 
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/> 
 
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/> 
 
</svg>

Xem jsfiddle.