изогнутые линии в путешествии (график) - PullRequest
Новая
       1

изогнутые линии в путешествии (график)

0 голосов
/ 05 июля 2018

Я пытаюсь совершить путешествие (график), как показано на рисунке ниже. enter image description here

У него всего 15 этапов, и я показываю его без прокрутки страницы.

Я могу сделать это по прямой линии, но я не могу сделать их изогнутыми по всей линии.

Как мне этого добиться?

ниже мой код HTML и CSS 

.timeline{
      margin-top: 100px;
      /* width: 390px; */
    }
    .row{
           display: flex;
           margin: 0px 0;
           background-image: url('https://image.ibb.co/kCcH1d/dot.png');
           background-repeat-y: no-repeat;
           width: 390px;
         }


         .circle{
           height: 30px;
           width: 30px;
           background: red;
           border-radius: 50%;
           text-align: center;
           margin-right: 50px;
           margin-left: 50px;
           margin-top: -15px;
           display: flex;
           align-items: center;
           justify-content: center;
         }

         .row.right:after {
          height: 70px;
          background-image: url('https://image.ibb.co/eibc1d/dot2.png');
          background-repeat-x: no-repeat;
          content: "";
          width: 2px;
      }
        .row.left:before {
         height: 70px;
         background-image: url('https://image.ibb.co/eibc1d/dot2.png');
         background-repeat-x: no-repeat;
         content: "";
         width: 2px;
     }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="timeline">
      <div class="row right">
        <div class="circle"> A </div>
        <div class="circle"> B </div>
        <div class="circle"> C </div>
      </div>

      <div class="row left">
        <div class="circle"> D </div>
        <div class="circle"> E </div>
        <div class="circle"> F </div>
      </div>

      <div class="row right">
        <div class="circle"> G </div>
        <div class="circle"> H </div>
        <div class="circle"> I </div>
      </div>

      <div class="row left">
        <div class="circle"> J </div>
        <div class="circle"> K </div>
        <div class="circle"> L </div>
      </div>
      <div class="row right">
        <div class="circle"> M </div>
        <div class="circle"> N </div>
        <div class="circle"> 0 </div>
      </div>

    </div>



   
  </body>
</html>

1 Ответ

0 голосов
/ 05 июля 2018

Это очень простой пример того, как сделать это с помощью SVG (я просто рисую это с помощью Adobe Experience Design), родительская группа внутри кругов содержит событие onclick, отправляющее порядок позиции индекса в функцию JS, надеюсь, это поможет 

function eventthis(position,obj){
  console.log('clicked in position ',position);
  //do stuff 
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 500">
  <defs>
    <style>
      .cls-1 {
        clip-path: url(#clip-Custom_Size_1);
      }

      .cls-2, .cls-5 {
        fill: none;
      }

      .cls-2, .cls-3 {
        stroke: #707070;
      }

      .cls-3, .cls-6 {
        fill: #fff;
      }

      .cls-4 {
        stroke: none;
      }
    </style>
    <clipPath id="clip-Custom_Size_1">
      <rect width="300" height="500"/>
    </clipPath>
  </defs>
  <g id="Custom_Size_1" data-name="Custom Size – 1" class="cls-1">
    <rect class="cls-6" width="300" height="500"/>
    <path id="Path_1" stroke-dasharray="3" data-name="Path 1" class="cls-2" d="M24.621,20.759s227.3-30.868,227.44,35S57.809,52.051,52.528,108.6s181.931,3.044,188.138,66.8c-2.136,14.672,16.033,76.56-78.386,56.463S42.461,229.014,47.672,265.7s213.89-23.538,204.39,63.023c-5.839,15.735,10.235,57.524-139.437,35.4-71.377-4.844-77.94,71.9-77.94,71.9" transform="translate(11 17)"/>
    <g id="Ellipse_1" data-name="Ellipse 1" class="cls-3" transform="translate(20 25)" onclick="eventthis(1,this)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_2" onclick="eventthis(2,this)" data-name="Ellipse 2" class="cls-3" transform="translate(248 51)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_3" onclick="eventthis(3)" data-name="Ellipse 3" class="cls-3" transform="translate(46 103)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_4" onclick="eventthis(4,this)" data-name="Ellipse 4" class="cls-3" transform="translate(232 162)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_5" onclick="eventthis(5,this)" data-name="Ellipse 5" class="cls-3" transform="translate(46 235)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_6" onclick="eventthis(6,this)" data-name="Ellipse 6" class="cls-3" transform="translate(232 300)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
    <g id="Ellipse_7" onclick="eventthis(7,this)" data-name="Ellipse 7" class="cls-3" transform="translate(51 384)">
      <circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
      <circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
    </g>
  </g>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...