Làm thế nào để làm cho chiều rộng đột quỵ miễn dịch với ma trận chuyển đổi hiện tại

Question

Trong SVG (và Canvas, Quartz, Postscript, ...), ma trận chuyển đổi ảnh hưởng đến cả tọa độ đường dẫn và chiều rộng đường. Có cách nào để thực hiện điều chỉnh sao cho chiều rộng của đường không bị ảnh hưởng? Tức là, trong ví dụ sau, thang đo là khác nhau cho X và Y, làm cho hình vuông thành hình chữ nhật, đó là OK, nhưng nó cũng làm cho các đường rộng hơn ở hai bên.

<g transform="rotate(30) scale(5,1) "> 
     <rect x="10" y="10" width="20" height="20" 
      stroke="blue" fill="none" stroke-width="2"/> 
    </g> 

Tôi có thể thấy rằng sẽ có ích trong nhiều trường hợp, nhưng là có một cách để lựa chọn ra khỏi nó? Tôi cho rằng tôi muốn có một cây bút riêng biệt hoặc có thể đặt bút là hình elip mà CTM chuyển đổi thành một vòng tròn, nhưng tôi không thấy bất cứ thứ gì như thế.

Thiếu điều đó, tôi nghĩ tôi không được nói với SVG về CTM của tôi và thay vào đó tự biến đổi tọa độ, có nghĩa là chuyển đổi nguyên thủy như rect thành tương đương path tương đương.

Answer 1

Edit:

Có một thuộc tính mà bạn có thể thêm vào rect của bạn để có được chính xác hành vi này:

vector-effect="non-scaling-stroke" 

Đây là sai:

Điều này sẽ có tác dụng nếu bạn áp dụng biến đổi trực tiếp cho hình dạng, không phải nhóm nó đang ở. Tất nhiên, nếu bạn muốn nhóm một số mục và chia tỷ lệ chúng lại với nhau, cách tiếp cận đó sẽ không hoạt động.

<rect x="10" y="10" width="20" height="20" 
      stroke="blue" fill="none" stroke-width="2" 
      transform="rotate(30) scale(5,1)"/> 

Điều này cũng có thể phụ thuộc vào trình xem SVG của bạn; Inkscape hiển thị tệp của bạn theo cách bạn muốn (chiều rộng nét không bị ảnh hưởng theo tỷ lệ) nhưng Chrome hiển thị tệp như bạn đã hiển thị.

Answer 2

Trong bản ghi, mô tả đường dẫn và thực hiện hành trình là các sự kiện riêng biệt, do đó hoàn toàn có thể có TM "bút" riêng biệt.

%!PS 
%A Funky Shape 

matrix currentmatrix %save normal matrix for stroke pen 
306 396 translate 
72 72 scale 
1 1 5 { pop 
    360 5 div rotate 
    1 0 translate 
    0 0 moveto 
    1 1 5 { pop 
     360 5 div rotate 
     1 0 translate 
     1 0 lineto 
     -1 0 translate 
    } for 
    -1 0 translate 
    closepath 
} for 
setmatrix 
[ 1 -3 4 2 0 0 ] concat %put some skew in the pen 
10 rotate  %makes it look more "organic" 
stroke 
showpage