Làm thế nào để cắt một lỗ trong hình chữ nhật SVG

Question

Vì vậy, về cơ bản như tiêu đề của tôi nói, tôi muốn "cắt một lỗ" trong một phần tử trực tiếp.

Tôi có hai phần tử trực tiếp, một phần tử trên đầu kia. Cái ở phía dưới có màu tô màu trắng, và cái ở trên cùng có màu tô xám.

Điều tôi muốn làm là cắt một hình tam giác ra khỏi phần tử trực tràng trên sao cho phần tử trực tiếp bên dưới thể hiện qua.

Phần tử svg này sẽ được sử dụng làm nút âm thanh cho trình phát đa phương tiện trên một trang. Nói cách khác, bạn sẽ có thể nhấp chuột (hoặc kéo) chuột trái/phải và thay đổi mức âm thanh sẽ được biểu diễn bằng sự thay đổi chiều rộng của phần tử trực tiếp ở phía dưới, cho thấy qua hình tam giác cắt ra của phần tử rect top.

Tôi hy vọng điều đó không quá khó hiểu. : P

Đây là một mockup nhanh chóng của những gì nó sẽ giống như thế: http://forboden.com/coding/s1.png

Dưới đây là mã của tôi: http://forboden.com/coding/svgClipTest.html

đâu tôi sẽ sai ở đây?

Answer 1

Cách dễ nhất là sử dụng <path> với lỗ và đặt sự kiện con trỏ thành none để sự kiện có thể đi qua đến <rect> dưới. Tất nhiên có rất nhiều cách khác để xử lý các sự kiện như gói chúng với <g> và xử lý các sự kiện trên đó.

Bạn không cần giới hạn bản thân đối với các hình dạng cơ bản và sử dụng việc cắt phức tạp. Làm cho mọi thứ trở nên đủ khả thi để bạn có thể sao chép & dán dữ liệu đường dẫn được tạo bởi các công cụ như inkscape.

Answer 2

Tôi thấy rằng bạn đã giải quyết xong, chỉ muốn thêm rằng nếu bạn muốn một cái gì đó nâng cao hơn thì nó thường khá dễ sử dụng một ví dụ <mask>, xem http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg.

Tuy nhiên, nếu bạn có thể tránh tạo mặt nạ và cắt bớt (ví dụ: chỉ cần vẽ mọi thứ lên trên) thường dẫn đến hiệu suất/trải nghiệm người dùng tốt hơn.

Answer 3

Bạn có thể sử dụng thuộc tính fill-rule: evenodd (mặc định) để đạ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:

Điểm mấu chốt 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 (chiều kim đồng hồ vs chống 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ỗ: "Tôi sẽ ở đâu sai ở đây"