14

Можно наложить background-ом и потом абсолютное позиционирование, либо есть другой, быстрый и правильный метод?

введите сюда описание изображения

22
  • 1
    SVG - самый внятный вариант
    – Air
    19 фев 2018 в 10:44
  • хорошо, а элементы как спозиционировать посоветуете ?
    – user281117
    19 фев 2018 в 10:45
  • Тоже SVG... так как css-ом добиться такого и качества и результата, если только на каждый пиксель прописывать медиа
    – Air
    19 фев 2018 в 10:49
  • ну на счет линий думаю лучше свг, но сами блоки то верстаются как обычно, просто как их спозиционировать так же строго по линии?
    – user281117
    19 фев 2018 в 10:55
  • 1
    @user281117 у вас есть картинка фона одной кривой без прямоугольников? Если нет, то свяжитесь со своим дизайнером и попросите его переслать требуемую картинку. Я думаю это будет не трудно для него сохранить соответствующий слой. Если конечно он сам рисовал, а не позаимствовал где-нибудь. Имея такую картинку задача будет решена, хоть в css, но лучше в svg 19 фев 2018 в 15:53

3 ответа 3

11

Если вам нужно получить полностью адаптивный график, который работает во всех браузерах, включая IE, то конечно нужно использовать SVG.

Идеальный вариант, когда дизайнер даёт исходные данные в векторном формате, но если это растровая картинка, то можно воспользоваться следующей техникой:

  • Загружаем растровую картинку в векторный редактор с помощью нескольких строчек svg. Это нужно, чтобы точно позиционировать положение векторных элементов относительно растрового фона.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="441" height="495" viewBox="0 0 441 495" > 
     <image xlink:href="SlalomTransp2.png" width="441" height="495" />
</svg>
  • Нам необходимо получить формулу path которая точно повторяет форму кривой на растровом изображении. Для этого в векторном редакторе с помощью инструмента - "рисовать кривые Безье" добавляем узловые точки вдоль кривой и двигая рычагами узловых точек, добиваемся точного совпадения нашего path с кривой на растровой картинке.

  • Сохраняем файл и копируем из него формулу path кривой.

  • Далее создаем заготовки баннеров и помещаем их в секцию <defs> для дальнейшего многократного использования

  • Вызываем баннер из хранилища и позиционируем его относительно кривой:

<use xlink:href="#banner" x="50" y="14" />

  • Размещаем текст в баннере

<text x="58" y="25" >Ноябрь 2017</text>

.Такая техника может быть освоена начинающими изучение SVG.
Она немного трудоемка, но дает неоспоримые преимущества перед CSS

  1. Кривые в CSS offset-path поддерживает только экспериментальная технология Chrome
    В svg кривые поддерживают все современный браузеры плюсIE.
  2. Если будет необходимость, то легко заменить одну форму баннера на другую.
  3. Можно менять форму кривой, без нарушения верстки.
  4. Приложение полностью адаптивно и верстка никогда не сломается при изменении размера дисплея гаджета.

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 441 495" preserveAspectRatio="xMinYMin meet">  

<defs>
<g id="banner">
<rect width="70" height="40" fill="#26365F"/> 
<polyline points="35,40 35,58" stroke="#45678B" stroke-width="1.5"/> 
<circle cx="35" cy="60" r="3" fill="none" stroke="#45678B" stroke-width="2"/>
</g>
<g id="banner2">
<polyline points="50,50 50,75" stroke="#45678B" stroke-width="1.5"/> 
<circle cx="50" cy="75" r="3" fill="none" stroke="#45678B" stroke-width="2"/>
<rect width="100" height="60" fill="#26365F"/> 
</g>
</defs>

<rect width="100%" height="100%" fill="#182037" />
<path fill="none" stroke="#45678B" stroke-width="1" d="m82.7 74c0 0 27.9-4.1 41.9-5.5 15.8-1.6 31.6-2.5 47.4-3.3 13.9-0.7 27.9-1.1 41.9-1.1 15.1 0 30.2 0.1 45.2 1.2 12.2 0.9 24.3 2.3 36.3 4.4 13 2.3 25.9 5 38.6 8.8 10.9 3.3 22.7 5.6 32 12.1 7.9 5.6 15.8 12.9 18.7 22 3 9.1 1.5 19.8-2.2 28.7-3.9 9.4-11.7 17.1-19.8 23.1-9.6 7.1-21.6 10.6-33 14.4-15.4 5.1-31.4 8.5-47.5 11-13.1 2-26.4 2.2-39.7 3.3-19.1 1.5-38.2 2.6-57.3 4.4-16.9 1.6-34 2.6-50.7 5.5-6.7 1.2-13.6 2.3-20 4.8-9.3 3.6-19.5 6-26.2 14.4-4.9 6.2-7.7 14.8-6.8 22.7 0.9 7.6 6.2 14.4 11.5 20 5.7 6 13.4 9.7 20.8 13.3 7.6 3.7 15.9 6.1 24 8.6 8.3 2.6 16.8 4.6 25.3 6.6 8.8 2.1 17.6 3.8 26.5 5.6 9.9 1.9 19.8 3.7 29.8 5.5 12.3 2.1 24.6 4.4 36.9 6.1 13 1.9 26.1 3.3 39.2 4.9 12.9 1.6 26 1.6 38.6 4.8 12.3 3.1 25.9 5.4 35.3 14 5.4 5 9.1 12.5 9.9 19.8 1.1 9.4-1 19.9-6.6 27.6-5.8 8-16.2 11.7-25.3 15.4-11.9 4.9-24.9 6.1-37.5 8.8-13.2 2.8-26.5 5.1-39.7 7.7-12.5 2.5-25.1 4.8-37.5 7.7-13 3.1-25.8 6.6-38.6 10.4-11.9 3.6-24 6.5-35.3 11.6-10.5 4.8-20.2 11.1-29.8 17.6-5.9 4-11.4 8.5-16.9 13.1-4 3.4-8.3 6.6-11.8 10.6-0.4 0.5-1.1 1.6-1.1 1.6" />

<use xlink:href="#banner" x="50" y="14" /> 
<use xlink:href="#banner" x="175" y="4" /> 
<use xlink:href="#banner" x="300" y="18" /> 
<use xlink:href="#banner" x="351" y="65" /> 
<use xlink:href="#banner" x="300" y="117" /> 
<use xlink:href="#banner" x="210" y="133" /> 
<use xlink:href="#banner" x="100" y="143" />
<use xlink:href="#banner" x="48" y="191" />
<use xlink:href="#banner" x="118" y="231" />
<use xlink:href="#banner" x="198" y="248" />
<use xlink:href="#banner" x="278" y="258" />
<use xlink:href="#banner" x="344" y="308" />
<use xlink:href="#banner2" x="200" y="343" /> 
<use xlink:href="#banner2" x="50" y="407" /> 
 
<g font-size="10" fill="#F0F0F0">
<text x="58" y="25" >Ноябрь 2017</text> 
<text x="53" y="40" >Запуск проекта</text>
<text x="182" y="15" >Декабрь 2017</text> 
<text x="186" y="30" >Инвестиции</text>
<text x="309" y="30" >Январь 2018</text> 
<text x="357" y="77" >Февраль 2018</text>
<text x="312" y="130" >Март 2018</text>
<text x="215" y="144" >Апрель 2018</text>
<text x="115" y="155" >Май 2018</text> 
<text x="60" y="215" >Июнь 2018</text> 
<text x="130" y="255" >Июль 2018</text>
<text x="208" y="270" >Август 2018</text>
<text x="281" y="280" >Сентябрь 2018</text> 
<text x="350" y="330" >Октябрь 2018</text>
<text x="225" y="365" >Ноябрь 2018</text>
<text x="201" y="385" >Окончательный выбор </text>
<text x="67" y="425" >Декабрь 2018 </text>
<text x="57" y="445" >Финишные работы </text>



</g>
</svg>

3

CSS свойство offset-path - путь кривой, по которой располагаются элементы (SVG-формат), offset-distance - расстояние от начала кривой в процентах. Если нужно блоки выровнять горизонтально - в руки Вам геометрия, JS и transform-rotate )))

body {
  background-color: #333;
  padding: 0 4em;
  width: 100%;
}

svg, .box {
  position: absolute;
}

.box {
  height: 50px;
  width: 50px;
  offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
}

.one {
    background-color: red;
    offset-distance:15%;
}

.two {
    background-color: green;
    offset-distance:50%;
}

.three {
    background-color: blue;
    offset-distance:78%;
}
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
  <path fill="none" stroke="#ffffff" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
</svg>

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>

9
  • Крутое решение, не знал об offset-path, лови плюс=)
    – Arthur
    11 мая 2018 в 14:42
  • Только вот незадача, без адаптивности это работает корректно=))
    – Arthur
    11 мая 2018 в 14:44
  • @Arthur, по моему это адаптивное решение. path ведь можно подстроить под людой экран
    – Areshka
    11 мая 2018 в 14:46
  • Убери width & height из svg и попробуй, почему-то смещаются квадраты
    – Arthur
    11 мая 2018 в 14:47
  • @Arthur, согласен. Не адаптивно совсем)
    – Areshka
    11 мая 2018 в 14:54
3

CSS - он в изначально "заквадраченный", рисует прямые линии и прямоугольники. Можно скругляться углы и получать из бордеров изогнутые линии - но в этом именно случае извращаться не стоит.

.timeline {
  position: relative;
  margin: 20px;
  background-color: #172238;
}
.timeline__back {
  display: block;
  width: 100%;
  height: auto;
}
.timeline__info {
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline__item {
  position: absolute;
  width: 180px;
  padding: 15px;
  margin-top: -35px;
  color: #fff;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 20px;
  background-color: #1e2b4b;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
}
.timeline__item:before,
.timeline__item:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
}
.timeline__item:before {
  height: 30px;
  width: 1px;
  background-color: #52789c;
}
.timeline__item:after {
  height: 7px;
  width: 7px;
  margin: 30px 0 0 -4px;
  background-color: #172238;
  border: 1px solid #52789c;
  border-radius: 50%;
}
.timeline__item strong {
  display: block;
}
.timeline__item--01 {
  top: 49%;
  left: 50%;
}
.timeline__item--02 {
  top: 33%;
  left: 80%;
}
.timeline__item--03 {
  top: 75%;
  left: 24%;
}
<section class="timeline">
  <img class="timeline__back" src="http://war.webdrafts.ru/bg_line.svg">
  <ul class="timeline__info">
    <li class="timeline__item timeline__item--01">
      <strong>Январь 2017</strong>Lorem ipsum dolor sit amet consectetur
    </li>
    <li class="timeline__item timeline__item--02">
      <strong>Январь 2017</strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit magnam, numquam
    </li>
    <li class="timeline__item timeline__item--03">
      <strong>Январь 2017</strong>Lorem ipsum dolor sit amet consectetur
    </li>
  </ul>
</section>

Сделайте так:

0) Делаем div-враппер, позишн = релатив, фон - синий.

1) В него кладем именно картинкой (не фоном) кривую линию - в .svg (дисплей = блок, ширина = 100%, высота = авто) Почему не фоном? потому что картинка будет распирать враппер по ширине и задавать высоту, будет удобно "резиниться".

2) Также добавляете во враппер список ul (позишн = статик) и в него - уже li (позишн = абсолют) с текстами. У каждого li будет два класса - первый, пусть .timeline__item (ширина, рамка, фон, цвет текста - один для всех li), и второй, который у всех разный - отвечает за положение каждого во враппере .timeline__item--01 (left: 22.7%; top: 45%;). Позицию в процентах, если резинить нужно.

Не нужно тексты пихать в картинку svg - они могут быть проигнорированы поисковиками!

Что в итоге?

  1. Картинка в фоне задает размер для враппера, в ней кривая линия, несвойственная для css.
  2. В коде - четкий список с данными в виде списка, seo - одобряэ )
  3. На экране - всё расставлено как нужно. Кружочек делаем через .timeline__item:before, вертикальную черту от блока к нему - .timeline__item:after

Проверить резиновость на https://codepen.io/Valiev/pen/LmmjgL

6
  • Я считаю, что лучше давать разработчику общее направление мыслей, а не конкретное решение для копипаста. Если svg внедрен в html как код - тогда да, а если как картинка - никакой индексации не будет. А уже если внедрять текст в код - то в нормальные html-теги. Как-то так.
    – MaxWall
    11 мая 2018 в 13:18
  • Ну, надеюсь мой ответ всё-таки пригодится! ) PS - К стати, анимация svg-улитки классно получилась, положил себе в избранное, на выходных разберу подход, спасибо за полноту ответа там!
    – MaxWall
    11 мая 2018 в 13:28
  • Ну чтож, останемся каждый при своем ) Если есть время и желание выдавать готовые решения с точностью до точки с запятой - я не против! )
    – MaxWall
    11 мая 2018 в 13:45
  • нормально и даже хорошо, Вы положительно удивили меня. Жаль, что истинной адаптивности, которую дает SVG нет Картинки транспарантов при уменьшении окна браузера наезжают друг на друга Но автора вопроса наверное итак устроит (+) 11 мая 2018 в 16:59
  • @Alexandr_TT ну такая истинная адаптивность что бы и на супер-мелких экранах работало это уже работать и весьма тяжёлая самого автора, думаю это уже к теме вопроса не относится. А может для мелких экранов просто другую страницу проще сделать без кривой линии просто с вертикальной прямой... думаю это было бы лучшим решением. 11 мая 2018 в 17:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.