Как объединить кривую и форму линии вместе в пути SVG - PullRequest
Новая
       10

Как объединить кривую и форму линии вместе в пути SVG

0 голосов
/ 26 ноября 2018

Я создал форму SVG в HTML и это прямая линия с кривой в нем.проблема в том, что я не знаю, как их объединить, я добавил команду Z Close Path, но она не объединяет форму, как я хочу, я много исследовал, но не смог найти решение.ниже приведен скриншот формы, которую я хочу получить.

и нижеприведенная форма - это то, что я сделал, и это хорошо, но я хочу объединитьвесь путь.

enter image description here

SVG CODE 

<svg viewBox="0 0 100 100">
        <path stroke="blue" stroke-width=".7" fill="transparent" d="M14 10 H12 V35 H25 V10 H23 M14 10 C 14 17, 23 17, 23 10 " />
</svg>

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Если вам нужно решение CSS, вы можете попробовать это: 

.box {
  width:100px;
  height:150px;
  background:radial-gradient(circle at top,transparent 13%,#f2f2f2 14%);
  border-radius:0 0 10px 10px;
  filter:drop-shadow(0 0 3px #000);
}
<div class="box"></div>
0 голосов
/ 26 ноября 2018

Вам нужно оставить только первую M-команду.Я изменил вашу последнюю кривую, чтобы вам не нужно было возвращаться к первой точке.Также я добавил команду z в конце атрибута d, чтобы закрыть путь. 

<svg viewBox="0 0 50 50">
        <path stroke="blue" stroke-width=".7" fill="transparent" 
              d="M14 10 
                 H12 
                 V35 
                 H25 
                 V10 
                 H23 
                 C 23 17, 14 17, 14 10 z" />

</svg>
...