Как я могу объединить две фигуры в SVG?

Question

У меня есть две формы: круг и прямоугольник. Хочу превратить их в одну фигуру. Есть ли способы сделать это в коде 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>

_{Свободный перевод вопроса How can I merge two shapes in svg? от участника @misterioss.}

Answer 1

Вы можете сделать <mask> или <clipPath> из двух фигур, а затем использовать их для маскировки третьей фигуры. Затем вы можете применить свою тень к этой фигуре.

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

Примечание. Если вам интересно, почему мы применяем здесь тень
к родительскому элементу , то это потому, что если бы мы применили его непосредственно к <rect>, тень также была бы привязана к клипу.

_{Свободный перевод ответа How can I merge two shapes in svg? от участника @Paul LeBeau.}

Answer 2

Для любого, кто ищет ответ на актуальный вопрос о том, как объединить две контурные фигуры в одну контурную фигуру (а не наносить тень на комбинированную фигуру), вот возможное решение:

<svg width="400" height="400">
    <defs>
        <rect id="canvas" width="100%" height="100%" fill="white" />
        <rect id="shape1" x="40" y="50" width="40" height="70" />
        <circle id="shape2" cx="50" cy="50" r="50" />
        <mask id="shape1-cutout">
            <use href="#canvas"  />
            <use href="#shape1"  />
        </mask>
        <mask id="shape2-cutout">
            <use href="#canvas"  />
            <use href="#shape2"  />
        </mask>
    </defs>
    <use href="#shape1" stroke="red" fill="none" mask="url(#shape2-cutout)" />
    <use href="#shape2" stroke="red" fill="none" mask="url(#shape1-cutout)" />
</svg>

Код по существу рисует круг с вырезанной из его части прямоугольную форму и рисует прямоугольник с вырезанным из него частью круга. Когда вы совмещаете эти «вырубленные» фигуры друг на друга, вы получаете то, как выглядит одна контурная фигура.

Вот что на самом деле делает SVG:

SVG определяет белый прямоугольник, называемый «холст», который имеет тот же размер, что и SVG.

<rect id="canvas" width="100%" height="100%" fill="white" />

в SVG определены две фигуры, которые должны быть объединены («shape1» и «shape2»).
определяется маску для каждой фигуры, которая объединяет холст (который имеет заливку белого цвета) с формой (которая по умолчанию имеет заливку черного цвета). Обратите внимание, что когда вы применяете маску к фигуре, отображается та часть фигуры, которая соответствует белой области маски, а та часть, которая соответствует черной части, обрезается.
Рисуется каждая фигура с маской от другой фигуры.

БЛОГ НА HUSL

Как я могу объединить две фигуры в SVG?

Ответы (2 шт):