Как слить две фигуры в svg?

Например, у меня есть две формы: круг и прямоугольник. Я хочу преобразовать их в одну фигуру. Есть ли способ сделать это в коде svg?Как слить две фигуры в 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>

Как это: like this

источник

2016-08-28 misterioss

Что случилось с тем, как вы делаете это в настоящее время? –

Я хочу применить теневой фильтр к этим фигурам, но я хочу, чтобы только внешние границы были не внутренними. Мне жаль, что это не похоже на одну полную форму, но нарисовано как две части svg. – misterioss

с использованием AI (составной путь -> make), он сделает атрибут пути в svg export –

Вы можете сделать <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>

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

источник

2016-08-28 22:23:39

Это то, что я искал. Спасибо! – misterioss

Что не так с помощью dropshadow на группе вокруг фигур?

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

источник

2016-08-30 00:02:37

Как слить две фигуры в svg?

ответ

Смежные вопросы