Làm thế nào tôi có thể cắt một hình dạng bên trong hình dạng khác?

Question

Có cách nào để cắt hình dạng này ra hình dạng khác trong SVG không? Ví dụ, tôi có một rect và một hình elip và tôi muốn thực hiện một rect với một lỗ trong suốt ở giữa. Tôi sẽ tưởng tượng nó sẽ trông giống như thế này:

<set operation="difference" fill="black"> 
    <rect x="10" y="10" width="50" height="50/> 
    <ellipse cx="35" cy="35" rx=10 ry=10/> 
</set> 

Điều gần nhất tôi có thể tìm thấy là cắt, sẽ cho tôi giao điểm của hai hình dạng. Trong ví dụ của tôi mà sẽ cho kết quả chỉ lỗ được rắn và phần còn lại của rect là minh bạch.

Tôi đã xem qua Inkscape và có một tùy chọn khác biệt trong menu đường dẫn, nhưng điều này chuyển đổi hình dạng thành đường dẫn và sau đó tạo đường dẫn mới. Danh tính của các hình dạng bị mất do đó không có cách nào dễ dàng, ví dụ đi vào tập tin svg và thay đổi bán kính của hình elip.

Có ý tưởng nào về cách tôi có thể thực hiện việc này không?

Answer 1

Bạn sẽ có thể sử dụng thuộc tính fill-rule: evenodd để đạt được hiệu ứng này, nếu bạn muốn ngăn không cho hình chữ nhật tô màu nơi hình tròn. Xem this example from the SVG specification (hình ảnh dưới đây sẽ chỉ hiển thị nếu trình duyệt của bạn hỗ trợ SVG):

Đối với một số lý do, tôi dường như không thể có được điều này để làm việc với hình dạng giống như rect và ellipse mà bạn cung cấp trong câu hỏi. Here's my attempt:

Answer 2

Thật không may có vẻ như không có cách nào để thực hiện việc này. Cả SVG 1.0 lẫn SVG 1.1 đều không hỗ trợ các phép toán dạng boolean, việc cắt bớt được hỗ trợ vì các lý do khác. Gần nhất bạn có thể nhận được là cố gắng để có được một hình dạng "đảo ngược" để làm việc cắt.

Answer 3

Bạn cần phải sử dụng một <path> nếu bạn muốn sử dụng fill-rule. Nhưng nó chắc chắn có thể thay đổi bán kính của một vòng tròn đó là một subpath của <path>, bạn chỉ cần làm chủ arc path command.

Answer 4

Bạn phải sử dụng phần tử đường dẫn để cắt lỗ.

Xem the example from the SVG specification: (bạn có thể nhấp vào liên kết này hoặc những hình ảnh sau đây để xem nội dung tập svg thực)

<g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3"> 
    <path d="M 250,75 L 323,301 131,161 369,161 177,301 z"/> 

    <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z 
      M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z"/> 

    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z 
      M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z"/> 
</g> 

---

Đối với trường hợp của bạn:

<path d="M10 10h50v50h-50z M23 35a14 10 0 1 1 0 0.0001 z" 
    stroke="blue" stroke-width="2" fill="red" fill-rule="evenodd" /> 

M10 10h50v50h-50z sẽ vẽ trực tràng.

M25 35a10 10 0 1 1 0 0.0001 z sẽ vẽ hình elip.

fill-rule="evenodd" sẽ tạo lỗ.

---

Điểm chính là vẽ hình dạng bên ngoài và hình dạng bên trong (lỗ) theo hướng khác nhau (theo chiều kim đồng hồ so với ngược chiều kim đồng hồ).

• Vẽ hình dạng bên ngoài theo chiều kim đồng hồ và vẽ hình dạng bên trong (lỗ) ngược chiều kim đồng hồ.
• Hoặc ngược lại, vẽ hình dạng bên ngoài (lỗ) ngược chiều kim đồng hồ và vẽ hình dạng bên trong theo chiều kim đồng hồ.
• Kết hợp dữ liệu đường dẫn của hình dạng bên ngoài và hình dạng bên trong (lỗ).

Bạn có thể cắt nhiều lỗ hơn bằng cách thêm nhiều dữ liệu đường dẫn lỗ.

Hình ảnh này giải thích làm thế nào để cắt một lỗ:

Xem tài liệu w3c: SVG Arc Commands và SVG fill-rule Property.