Как сверстать такую композицию фигур?

Question

Как сверстать такую композицию фигур?
Границы должны быть расположены, как это изображено на картинке.
Фигуры должны быть прозрачными, видны только их границы.

Answer 1

Собственно не сложно

<svg viewBox="0 0 500 240" width="500">
  <circle cx="60" cy="75" r="50" fill="transparent" stroke="#000" stroke-width="10"/>
  <path d="m140,60 320,0 0,140 -400,0 0,-50 q70,0 80,-95z" 
        fill="transparent" stroke="#000" stroke-width="10" stroke-dasharray="31 16"/>
</svg>

Answer 2

Статичный вариант

stroke-dashoffset используется для сдвига пунктирной линии, чтобы заполнить углы.

Общая длина пунктирной линии равна - 1052px
Делим на 35 сегментов, один сегмент равен 30.05px
Поэтому stroke-dasharray:26, 4.05;, где 26 длина черты, 4.05 пробел.

#circ,#rec {
fill:transparent;
stroke:#979797;
stroke-width:8;
}

#rec {
stroke-dasharray:26,4.05;
stroke-dashoffset:-3;
}

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 240" width="500" version="1.1">
  <circle id="circ" cx="60" cy="75" r="55"/>
    
   <path id="rec" d="M140 60H460V200H60v-50c46.7 0 81-30.4 72.7-90.1z" />
 
</svg>

Вариант с анимацией пунктирной линии при клике по окружности:

#circ,#rec {
fill:transparent;
stroke:#979797;
stroke-width:8;
}

#rec {
stroke-dasharray:26,4.05;
stroke-dashoffset:-3;
}

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 240" width="500" version="1.1">
  <circle id="circ" cx="60" cy="75" r="55" >
    <animate attributeName="fill" begin="circ.click" dur="0.5s" to="yellowgreen" fill="freeze" />
  </circle>	
  <path id="rec" d="M140 60H460V200H60v-50c46.7 0 81-30.4 72.7-90.1z" >
    <animate attributeName="stroke-dashoffset" begin="circ.click" dur="4s" values="100;-3" repeatCount="indefinite" />
 </path>
</svg>

Вариант анимации CSS

.circ,.rec {
fill:transparent;
stroke:#979797;
stroke-width:8;

}
.rec { 
stroke-dasharray:20,4;
stroke-dashoffset:3;
}

.circ:hover {
fill:skyblue;
}

.circ:hover + .rec {
animation: anim 1s linear infinite;

}
@keyframes anim { 
0%{stroke-dashoffset:3;}
100%{stroke-dashoffset:100;}
}

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 240" width="500" version="1.1">
  <circle class="circ" cx="60" cy="75" r="55" >
    
  </circle>	
  <path class="rec" d="M140 60H460V200H60v-50c46.7 0 81-30.4 72.7-90.1z" >
    
 </path>
</svg>

Update

Вычисление длины пути:

<div> 
 <input  type="button" value="Total"  onclick="TotalLength()"/>
 </div>  
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="500" height="500" viewBox="0 0 500 500" > 
 
         <path id="check" fill= "none" stroke ="grey" stroke-width ="1" 
         
		 d="M140 60H460V200H60v-50c46.7 0 81-30.4 72.7-90.1z" />
</svg> 
   <script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Длина пути - " + len);
        };
  </script>

БЛОГ НА HUSL

Как сверстать такую композицию фигур?

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