Может кто помочь с SVG моментом?

115
07 мая 2021, 02:30

Пытаюсь сделать эту секцию SVG методом. Смотрю видеоролики, читаю статьи, но все ровно ничего не получается. Может кто объяснить полностью как сделать эту секцию, или скинуть именно нужные ролики и статьи, по которым вы поняли как делать подобные секции. И заранее попросил бы не кидать первые видео с ютуба(ибо их я и смотрел)

Answer 1

Пошаговая инструкция:

  • Для получения точной привязки контуров фигур к фоновой картинке загружаем картинку в векторный редактор и присваиваем значения SVG в соответствии с габаритными размерами картинки.

    width="1330" height="880" viewBox="0 0 1330 880"


        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
        xmlns:xlink="http://www.w3.org/1999/xlink" 
           width="1330" height="880" viewBox="0 0 1330 880" preserveAspectRatio="xMinYMin meet" >   
 
    <image xlink:href="https://i.stack.imgur.com/cb744.png" width="100%" height="100%" /> 
    </svg>

  • В векторном редакторе с помощью инструмента - Рисовать кривые Безье и прямые отрезки

    наносим узловые точки по контурам красной линии и шестиугольников

  • Сохраняем файл SVG, забираем из него path общей линии и шестиугольников.

  • Добавляем в каждый шестиугольник текст, который позиционируем координатами X, Y 

    <text class="txt1" x="355" y="400"  > STEP
  <tspan dx="0">1 </tspan></text>

    Добавляем картинку в шестиугольник с помощью pattern 

    <pattern
  id="pattern"
  x="0px" y="-255px"
  width="341px"
  height="382px"
  patternUnits="userSpaceOnUse"
>
  <image
    xlink:href="https://i.stack.imgur.com/DSbkL.jpg"
    width="341px"
    height="382px"
  />
</pattern>  


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="100%" height="100%" viewBox="0 0 1330 880"  >   
<defs>  
  <pattern 
       id="pattern" 
       x="0px" y="-255px" 
       width="341px" 
	   height="382px" 
       patternUnits="userSpaceOnUse"> 
      <image 
         xlink:href="https://i.stack.imgur.com/DSbkL.jpg" 
        width="341px" 
	   height="382px" 
       /> 
    </pattern>   
 <pattern 
       id="pattern2" 
       x="40px" y="-380px" 
         width="304px" 
	     height="343px" 
       patternUnits="userSpaceOnUse"> 
      <image 
         xlink:href="https://i.stack.imgur.com/hZrmI.jpg" 
             width="304px" 
	         height="343px" 
       /> 
    </pattern> 	  
	 
</defs> 
	  
 <g fill="#FEFEFE" stroke="gray" stroke-width="2">  	  
  <path id="hex_1" class="h1" d="m402.1 321 106.8 60.6v121.3l-106.8 64.6-106.8-64.6V381.7ZM731.7 381.7l104.1 60.6" /> 
  <path id="hex_2" class="h1" d="m731.7 381.7 104.1 60.6v125.2l-104.1 64.6-106.8-64.6V442.3Z" /> 
  <path id="hex_3" class="h2" fill-opacity="0.6" style="fill:url(#pattern2);" d="m1099.5 289.4 163.5 92.3V567.6L1099.5 658.5 940 567.6V381.7l159.5-92.3" />  
  <path class="h2" fill-opacity="0.9"  style="fill:url(#pattern);" d="m508.9 503 160.8 94.9V782.4L508.9 876 349.4 782.4V597.9l159.5-94.9M835.8 199.7l104.1 62" class="s0"/> 
  <path class="h1" d="m835.8 199.7 104.1 62v120l-104.1 60.6-104.1-60.6V261.7Z" class="s0"/> 
</g>   
    <!-- Красная линия, показывающая прогресс--> 
 <path id="progress" fill="none" stroke-width="4" stroke="red"   
     d="m295.3 381.7 106.8-60.6 106.8 60.6v121.3l116 64.6 0-125.2 106.8-60.6V261.7l104.1-62 104.1  62v120l159.5-92.3 163.5 92.3v185.9l-163.5 91" > 
 </path>    
		  
</svg>

  • Добавляем красные кружки с галочкой, вместо них можно добавить иконки, как на эскизе

    <g id="crc1">
  <circle  r="23" fill="#FC635E"/>
  <text x="-15" y="15" fill="white" font-size="36" >&#10004;</text>
</g>

Ниже полный пример кода, добавил анимацию общей линии 

 .h1{ 
 fill-opacity:0.6; 
  }  
  
  .h2 { 
 fill-opacity:0.9; 
  } 
 .txt1 { 
  font-size:32px; 
  fill:#595959; 
  text-decoration: underline; 
   font-weight:500; 
   }  
  .txt2 { 
  font-size:20px; 
  fill:#444444; 
   font-weight:500; 
   }  
 tspan { 
 fill:#FC635E; 
 font-weight:500; 
 font-size:36px; 
  } 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="100%" height="100%" viewBox="0 0 1330 880"  >   
<defs>  
  <pattern 
       id="pattern" 
       x="0px" y="-255px" 
       width="341px" 
	   height="382px" 
       patternUnits="userSpaceOnUse"> 
      <image 
         xlink:href="https://i.stack.imgur.com/DSbkL.jpg" 
        width="341px" 
	   height="382px" 
       /> 
    </pattern>   
 <pattern 
       id="pattern2" 
       x="40px" y="-380px" 
         width="304px" 
	     height="343px" 
       patternUnits="userSpaceOnUse"> 
      <image 
         xlink:href="https://i.stack.imgur.com/hZrmI.jpg" 
             width="304px" 
	         height="343px" 
       /> 
    </pattern> 	  
	<g id="crc1"> 
	<circle  r="23" fill="#FC635E" />	 	 
    <text x="-15" y="15" fill="white" font-size="36" >&#10004;</text> 
   </g> 
</defs> 
 
	    
 <image xlink:href="https://i.stack.imgur.com/LC31J.jpg" width="100%" height="100%" />	    
 
  
	  
 <g fill="#FEFEFE" stroke="gray" stroke-width="2">  	  
  <path id="hex_1" class="h1" d="m402.1 321 106.8 60.6v121.3l-106.8 64.6-106.8-64.6V381.7ZM731.7 381.7l104.1 60.6" /> 
  <path id="hex_2" class="h1" d="m731.7 381.7 104.1 60.6v125.2l-104.1 64.6-106.8-64.6V442.3Z" /> 
  <path id="hex_3" class="h2" fill-opacity="0.6" style="fill:url(#pattern2);" d="m1099.5 289.4 163.5 92.3V567.6L1099.5 658.5 940 567.6V381.7l159.5-92.3" />  
  <path class="h2" fill-opacity="0.9"  style="fill:url(#pattern);" d="m508.9 503 160.8 94.9V782.4L508.9 876 349.4 782.4V597.9l159.5-94.9M835.8 199.7l104.1 62" class="s0"/> 
  <path class="h1" d="m835.8 199.7 104.1 62v120l-104.1 60.6-104.1-60.6V261.7Z" class="s0"/> 
</g>   
 
 <path id="progress" fill="none" stroke-width="4" stroke="red"  stroke-dashoffset="1975"    stroke-dasharray="1975" 
     d="m295.3 381.7 106.8-60.6 106.8 60.6v121.3l116 64.6 0-125.2 106.8-60.6V261.7l104.1-62 104.1  62v120l159.5-92.3 163.5 92.3v185.9l-163.5 91" > 
   <animate attributeName="stroke-dashoffset" dur="10s" values="1975;0" fill="freeze"/>	 
  </path>    
	  
	<text class="txt1" x="355" y="400"  > STEP 
     <tspan dx="0">1 </tspan></text>    
     <text	class="txt2" x="312" y="450"> Разработка проекта</text> 
	   <text class="txt2" x="300" y="490"> Согласование проекта </text> 
	 
	  <text class="txt1" x="425" y="725"  > STEP  
	    <tspan dx="0">2 </tspan></text>   
	     <text class="txt1" x="680" y="450"  > STEP  
	      <tspan dx="0">3 </tspan></text>    
		    <text	class="txt2" x="670" y="500"> Нулевой цикл</text> 
	     <text class="txt2" x="640" y="540"> Возведение коробки </text> 
		   
		   
	  <text class="txt1" x="790" y="280"  > STEP  
	      <tspan dx="0">4 </tspan></text> 	  
         <text	class="txt2" x="750" y="330"> Монтажные работы</text> 
	     <text class="txt2" x="750" y="370"> Отделочные работы </text> 
     		   
     <text class="txt1" x="1150" y="430"  > STEP  
	      <tspan dx="0">5 </tspan></text> 	      
   <use xlink:href="#crc1" x="300" y="380" />  
    <use xlink:href="#crc1" x="628" y="440" />  
	  <use xlink:href="#crc1" x="735" y="255" />  
	    <use xlink:href="#crc1" x="945" y="385" /> 
		   <use xlink:href="#crc1" x="1100" y="655" /> 
	  
</svg>

Answer 2

Вот на toster вчера задали вопрос о том как делать такие shape я там ответил и даже записал видео как это делается: Как делать Shape

На выходе получаем вот это :

body { 
  height: 100vh; 
  background: #F3F5F5; 
} 
 
.item { 
  max-width: 800px; 
  height: 600px; 
  margin: auto; 
  overflow: hidden; 
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"> 
<div class="item"> 
  <svg viewBox="0 85 300 215" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
    	<style> 
    		.path{fill: #fff; stroke:#999; stroke-width: 0.5;} 
    		.parent{stroke:tomato; stroke-linecap:round; stroke-linejoin:round; stroke-width:3; fill: none;} 
    		.circle{fill: tomato;} 
    		.text{font-size: 8px; font-weight: 600; fill: #fff; font-family: fontawesome;} 
        .descr{font-family: sans-serif; fill: #999; font-size: 10px;} 
        .descr1{font-family: sans-serif; fill: #999; font-size: 6px;} 
        .d2{fill: tomato;} 
        .line{stroke-width:1; stroke: #999;} 
    	</style> 
      <clipPath id="cp"> 
            <path  d="m25.958501 210.22236 47.401997-28.3337 48.602062 28.64167-0.60003 56.97535-47.10199 29.25761-48.302039-29.25761z"/> 
      </clipPath> 
    </defs> 
   <image xlink:href="https://cache3.youla.io/files/images/360_360/5c/a4/5ca4dfcf65bcf114356a4c36.jpg" x="20" y="170" width="130" height="130" transform="translate(1,-1)" preserveAspectRatio="none" clip-path="url(#cp)"/> 
   
    <path class="path" d="m10.957868 143.3918 31.501331-17.86256 30.60129 17.86258 0.300012 38.49684-30.9013 18.78648-31.50133-19.40242z"/> 
   
    <path class="path" d="m107.56195 164.64207 32.40136-19.40242 30.90131 18.17052 0.30002 38.18888-32.40138 18.78648-31.20131-19.09445z"/> 
    <path class="path" d="m170.86462 163.41017-30.90131-18.17052v-38.49686l30.6013-18.786458 30.6013 18.786458-0.60004 37.26497z"/> 
    <path class="path" d="m248.56791 229.00882-48.00204-27.71774v-57.28332l47.70202-27.40977 47.40199 28.64166-0.90003 55.43549z"/> 
 
 
   <path class="parent" d="m10.957868 143.3918 31.501331-17.86256 30.60129 17.86258 0.300009 38.49684 34.201452 19.40242v-36.64901l32.40136-19.40242v-38.49686l30.6013-18.786458 30.6013 18.786458-0.60004 37.26497 47.70202-27.40977 47.40199 28.64166-0.90003 55.43549-46.20194 28.33368"/> 
 
    <g><title>1</title><circle class="circle" cx="9" cy="142.62187" r="7" /></g> 
    <g><title>2</title><circle class="circle" cx="108" cy="162.17827" r="7" /></g> 
    <g><title>3</title><circle class="circle" cx="139.81332" cy="106.43483" r="7" /></g> 
    <g><title>4</title><circle class="circle" cx="200.71588" cy="142.77585" r="7" /></g> 
    <g><title>5</title><circle class="circle" cx="246"  cy="228" r="7" /></g> 
 
    <text class="text" x="4" y="145.5"></text> <!-- font-awesome --> 
    <text class="text" x="104" y="165"></text> <!-- font-awesome --> 
    <text class="text" x="135.5" y="109.5"></text> <!-- font-awesome --> 
    <text class="text" x="196.5" y="146"></text> <!-- font-awesome --> 
    <text class="text" x="241.5" y="231"></text> <!-- font-awesome --> 
   
    <g> 
      <text x="25" y="150" class="descr"> 
        <tspan class="d1">STEP</tspan> 
        <tspan class="d2" x="54">1</tspan> 
      </text> 
      <line x1="25" x2="60" y1="154" y2="154" class="line"/> 
        <text x="25" y="150" class="descr1"> 
          <tspan x="25" y="165">lorem ipsum</tspan> 
          <tspan x="25" y="172.5">sit dollar it</tspan> 
          <tspan x="25" y="180">ammed circular</tspan> 
       </text> 
    </g> 
   
    <g transform="translate(96,20)"> 
      <text x="25" y="150" class="descr"> 
        <tspan class="d1">STEP</tspan> 
        <tspan class="d2" x="54">2</tspan> 
      </text> 
      <line x1="25" x2="60" y1="154" y2="154" class="line"/> 
        <text x="25" y="150" class="descr1"> 
          <tspan x="25" y="165">lorem ipsum</tspan> 
          <tspan x="25" y="172.5">sit dollar it</tspan> 
          <tspan x="25" y="180">ammed circular</tspan> 
       </text> 
    </g> 
    <g transform="translate(126,-35)"> 
      <text x="25" y="150" class="descr"> 
        <tspan class="d1">STEP</tspan> 
        <tspan class="d2" x="54">3</tspan> 
      </text> 
      <line x1="25" x2="60" y1="154" y2="154" class="line"/> 
        <text x="25" y="150" class="descr1"> 
          <tspan x="25" y="165">lorem ipsum</tspan> 
          <tspan x="25" y="172.5">sit dollar it</tspan> 
          <tspan x="25" y="180">ammed circular</tspan> 
       </text> 
    </g> 
    <g transform="translate(210,0)"> 
      <text x="15" y="150" class="descr"> 
        <tspan class="d1">STEP</tspan> 
        <tspan class="d2" x="54">4</tspan> 
      </text> 
      <line x1="5" x2="70" y1="154" y2="154" class="line"/> 
        <text x="25" y="150" class="descr1"> 
          <tspan x="5" y="165">lorem ipsum</tspan> 
          <tspan x="5" y="172.8">sit dollar it</tspan> 
          <tspan x="5" y="180">ammed circular</tspan> 
          <tspan x="5" y="188">ammed circular bon ittem</tspan> 
       </text> 
    </g> 
     
 
</svg> 
</div>

READ ALSO
Активация тэга HTML
HTML

Активация тэга HTML

Возникла небольшая проблемаНа странице HTML, я вывожу предупреждение(alert)

 89
webpack - ошибки в сборке - Переменная среды NODE_ENV-production webpack не определена
HTML

webpack - ошибки в сборке - Переменная среды NODE_ENV-production webpack не определена

Какие моменты кода отвечают за ошибки, что нужно исправить:

 103
Использование html и xsl тэгов в xsl-преобразовании
HTML

Использование html и xsl тэгов в xsl-преобразовании

Я использую xsl-translations в своем проекте для создания таблиц и у меня есть несколько вопросов об эффективностиНапример: лучше ли использовать...

 90
Наложение стилей в css друг на друга
HTML

Наложение стилей в css друг на друга

Обнаружил любопытную проблемку, которую не могу решить (или потрачу слишком много времени), ввиду чего обращаюсь за советом

 110