Vẽ hình dạng bị bỏ trống trong SVG

Question

Tôi muốn vẽ hình dạng trong SVG có trung tâm rỗng. Tôi đã đặt câu hỏi này để vẽ vòng tròn có vòng tròn ở giữa here. Tôi muốn vẽ bất kỳ hình dạng nào trong SVG với phần giữa (hình dạng khác) bị rỗng. Bất kỳ ý tưởng nào?

Tôi nghĩ nó có thể là có thể sử dụng mặt nạ hoặc ClipPaths nhưng tôi không chắc chắn nếu tôi hiểu họ hoàn toàn

Answer 1

Tạo hình của bạn như một con đường, trong đó bao gồm hai tiểu đường. Con đường phụ đầu tiên mô tả hình dạng bên ngoài của bạn; con đường phụ thứ hai mô tả hình dạng bên trong. Đặt quy tắc điền của đường dẫn thành 'evenodd'.

ví dụ: cho hình chữ nhật rỗng, chúng ta tạo một đường bao gồm hai đường con. Một cho hình chữ nhật bên ngoài; một cho hình chữ nhật bên trong:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

<path d="M 100 100 L 200 100 L 200 200 L 100 200 z 
    M 110 110 L 190 110 L 190 190 L 110 190 z" 
    fill="red" 
    stroke="black" stroke-width="1" 
    fill-rule="evenodd"/> 

</svg>