Đoạn trích SVGHãy cắt nội dung * ngoài * ra

Question

Thông thường, phần tử <clipPath> ẩn tất cả mọi thứ được làm mờ đường dẫn clip. Để đạt được hiệu ứng ngược lại - đó là "cắt bỏ" một cái gì đó từ hình ảnh - tôi muốn sử dụng hai đường dẫn trong clipPath và thuộc tính clip-rule="evenodd". Về cơ bản, tôi muốn "xor" đường dẫn clip.

Nhưng nó không hoạt động. Nó cho thấy khu vực "ORed":

<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox"> 
     <rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" /> 
     <rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" /> 
    </clipPath>  

<rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/> 

EDIT:

Vấn đề của tôi là AFAIK <mask> không hoạt động trong iOS WebKit.

Answer 1

Sẽ dễ dàng hơn khi làm những gì bạn đang đeo sau mặt nạ, xem this example. Dưới đây là định nghĩa mặt nạ:

<mask id="maskedtext"> 
    <circle cx="50%" cy="50%" r="50" fill="white"/> 
    <text x="50%" y="55%" text-anchor="middle" font-size="48">ABC</text> 
</mask> 

Khu vực có màu trắng bên trong mặt nạ sẽ được giữ, mọi thứ khác sẽ bị cắt bớt.

Dưới đây là another example sử dụng clipPath thay vào đó, sẽ phức tạp hơn một chút vì bạn cần sử dụng phần tử đường dẫn để áp dụng quy tắc clip. ClipPath sử dụng clip-rule có dạng như sau:

<clipPath id="clipPath1"> 
    <path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/> 
</clipPath>