Làm cách nào để hợp nhất hai hình dạng trong svg?

Question

Ví dụ, tôi có hai hình dạng: hình tròn và hình chữ nhật. Tôi muốn chuyển đổi chúng thành một hình. Có cách nào để làm điều đó trong mã svg?

<svg width="400" height="400"> 
    <defs> 
    <g id="shape" fill="none" stroke="red"> 
     <rect x="40" y="50" width="40" height="70" /> 
     <circle cx="50" cy="50" r="50" /> 
    </g> 
    </defs> 

    <use xlink:href="#shape" x="50" y="50" /> 
    <use xlink:href="#shape" x="200" y="50" /> 

</svg> 

Như thế này:

Answer 1

Bạn có thể làm cho một <mask> hoặc một <clipPath> từ hai hình dạng và sau đó sử dụng để che dấu một hình dạng thứ ba. Sau đó bạn có thể áp dụng bóng đổ của bạn vào đó.

<svg width="400" height="400"> 
 
    <defs> 
 
    <clipPath id="shape"> 
 
     <rect x="40" y="50" width="40" height="70" /> 
 
     <circle cx="50" cy="50" r="50" /> 
 
    </clipPath> 
 
    
 
    <filter id="shadow"> 
 
     <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
 
     <feOffset dx="3" dy="3"/> 
 
     <feMerge> 
 
     <feMergeNode/> 
 
     <feMergeNode in="SourceGraphic"/> 
 
     </feMerge> 
 
    </filter> 
 
    </defs> 
 

 
    <g filter="url(#shadow)"> 
 
    <rect width="100%" height="100%" fill="red" 
 
      clip-path="url(#shape)"/> 
 
    </g> 
 

 
</svg>

Lưu ý: nếu bạn đang tự hỏi tại sao chúng tôi đang áp dụng các hiệu ứng bóng đổ cho phụ huynh <g> đây, đó là vì nếu chúng ta áp dụng nó trực tiếp đến <rect>, thả bóng sẽ phải chịu vào clip.

Answer 2

Có gì sai khi chỉ là một hình tròn thả xuống một nhóm xung quanh hình dạng?

<svg width="400" height="400"> 
 
    <defs> 
 
    <filter id="shadow"> 
 
     <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
 
     <feOffset dx="3" dy="3"/> 
 
     <feMerge> 
 
     <feMergeNode/> 
 
     <feMergeNode in="SourceGraphic"/> 
 
     </feMerge> 
 
    </filter> 
 
    </defs> 
 

 
    <g filter="url(#shadow)"> 
 
     <rect x="40" y="50" width="40" height="70" fill="red"/> 
 
     <circle cx="50" cy="50" r="50" fill="red"/> 
 
    </g> 
 

 
</svg>