Jak scalić dwa kształty w svg?

Question

Na przykład mam dwa kształty: okrąg i prostokąt. Chcę przekonwertować je na jedną figurę. Czy jest jakiś sposób na zrobienie tego w kodzie 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> 

Jak to:

Answer 1

Można zrobić <mask> lub <clipPath> z dwóch kształtach i następnie używać, aby zamaskować trzeci kształt. Następnie możesz zastosować do tego cień.

<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>

Uwaga: jeśli zastanawiasz się, dlaczego jesteśmy stosowania cień do rodzica <g> tutaj, to dlatego, że jeśli go stosować bezpośrednio na <rect>, cienia podlegałyby do klipu również.

Answer 2

Co jest nie tak z cieniem na grupę wokół kształtów?

<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>