Làm cách nào để thiết lập chiều rộng nét: 1 trên một số mặt nhất định của hình SVG?

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

Làm thế nào để người ta đặt chiều rộng nét vẽ chỉ trên ba cạnh của hình chữ nhật SVG?

Câu trả lời:

166

Nếu bạn cần có nét hoặc không thì bạn cũng có thể sử dụng stroke-dasharray để thực hiện việc này, bằng cách làm cho các 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>

Mở rộng đoạn mã

Xem jsfiddle .

— Erik Dahlström
nguồn

Làm thế nào chúng ta có thể hiển thị nét chỉ trên đầu phần tử trực tràng?

— Suresh

Bạn có thể giải thích tại sao những con số nhất định ở một số vị trí nhất định lại cho hiệu ứng này?

— JacobIRR

@JacobIRR tham khảo định nghĩa của thuộc tính 'stroke-dasharray' (được liên kết trong câu trả lời). Ý tưởng ở đây là khớp độ dài dấu gạch ngang với các cạnh của hình chữ nhật và khoảng cách dấu gạch ngang với cạnh không được có nét.

— Erik Dahlström

Tôi vừa cập nhật giải pháp của bạn, trong liên kết này codepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

Đây là một giải pháp có lập trình tạo stroke-dasharrayra một đối tượng xác định đường viền nào sẽ được hiển thị. Đọc mã có thể giúp bạn hiểu cách nó hoạt động: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

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 duy nhất trong SVG (không có mô-đun Hiệu ứng Vector chưa khả dụng ). Thay vào đó, bạn sẽ cần tạo các hình dạng riêng biệt cho từng nét vẽ hoặc phong cách hình ảnh khác mà bạn muốn thay đổi.

Cụ thể cho trường hợp này, thay vì sử dụng một <rect>hoặc <polygon>phần tử, bạn có thể tạo một <path>hoặc <polyline>chỉ bao gồm ba cạnh 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ể xem tác dụng của những thứ này trong hoạt động tại đây: http://jsfiddle.net/b5FrF/3/

Hình vuông màu đỏ có nét trên ba cạnh

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

— Phrogz
nguồn

Bạn có thể sử dụng một polyline cho ba cạnh được vuốt, và chỉ cần không đặ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 vẽ 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 sử dụng nhiều đối tượng để có được hiệu ứng giống nhau.

— wdebeaum
nguồn