Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
BadCatMan
0 / 0 / 0
Регистрация: 29.10.2015
Сообщений: 1
1

Постепенная отрисовка линии по координатам

01.11.2015, 17:41. Просмотров 340. Ответов 0
Метки нет (Все метки)

Стоит задача при нажатии на иконку начать отрисовку пути на карте. Но путь начинает рисоваться одновременно и с начальной точки и где-то возле конца. Нужно чтобы линия шла от начала до конца.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 <img id="map" src="map_1.jpg" width="1200" height="641">
      <svg id="crfg" width="1200" height="641" viewBox="0 0 1200 641">
<defs>
  <linearGradient id="stripes" 
                    x1="0" y1="0" x2="100%" y2="100%">
          <stop stop-color="hsl#000000" offset="10"/>
      
            
    </linearGradient>
</defs>
    <path stroke="white"  fill="black"
        d="M 79,324.5
           L 107,314.5 118,312.5 128,309.5 139,307.5 153,304.5 163,302.5 176,300.5 188,298.5 200,297.5 213,296.5 225,298.5 236,298.5 248,297.5 260,298.5 273,296.5 289,294.5 298,294.5 306,295.5 314,298.5 323,304.5 332,311.5 339,314.5 345,316.5 352,316.5 357,314.5 362,309.5 370,301.5 377,295.5 383,288.5 390,282.5 396,285.5 403,288.5 410,291.5 419,294.5 427,294.5 436,294.5 441,293.5 452,288.5 460,283.5 468,276.5 475,270.5 483,266.5 492,263.5 501,262.5 512,262.5 521,261.5 530,262.5 550,264.5 572.5,273.5 589.5,276.5 609.5,278.5 621.5,276.5 632.5,270.5 643.5,264.5 652.5,258.5 659.5,246.5 667.5,235.5 673.5,226.5 678.5,217.5 685.5,223.5 680.5,235.5 687.5,245.5 692.5,246.5 698.5,246.5 707.5,246.5 712.5,253.5 715.5,266.5 722.5,271.5 730.5,277.5 735.5,286.5 741.5,290.5 749.5,291.5 758.5,294.5 767.5,293.5 772.5,294.5 775.5,298.5 779.5,303.5 787.5,305.5 792.5,305.5 797.5,307.5 805.5,308.5 810.5,310.5 816.5,308.5 819.5,303.5 825.5,301.5 824.5,296.5 818.5,293.5 815.5,286.5 812.5,284.5 813.5,277.5 811.5,270.5 807.5,267.5 810.5,258.5"
  
    stroke-linecap="round"
    stroke-linejoin="round"
          />   
          <path class="er" stroke="white"  fill="black"
        d="M 79,324.5
           L 107,314.5 118,312.5 128,309.5 139,307.5 153,304.5 163,302.5 176,300.5 188,298.5 200,297.5 213,296.5 225,298.5 236,298.5 248,297.5 260,298.5 273,296.5 289,294.5 298,294.5 306,295.5 314,298.5 323,304.5 332,311.5 339,314.5 345,316.5 352,316.5 357,314.5 362,309.5 370,301.5 377,295.5 383,288.5 390,282.5 396,285.5 403,288.5 410,291.5 419,294.5 427,294.5 436,294.5 441,293.5 452,288.5 460,283.5 468,276.5 475,270.5 483,266.5 492,263.5 501,262.5 512,262.5 521,261.5 530,262.5 550,264.5 572.5,273.5 589.5,276.5 609.5,278.5 621.5,276.5 632.5,270.5 643.5,264.5 652.5,258.5 659.5,246.5 667.5,235.5 673.5,226.5 678.5,217.5 685.5,223.5 680.5,235.5 687.5,245.5 692.5,246.5 698.5,246.5 707.5,246.5 712.5,253.5 715.5,266.5 722.5,271.5 730.5,277.5 735.5,286.5 741.5,290.5 749.5,291.5 758.5,294.5 767.5,293.5 772.5,294.5 775.5,298.5 779.5,303.5 787.5,305.5 792.5,305.5 797.5,307.5 805.5,308.5 810.5,310.5 816.5,308.5 819.5,303.5 825.5,301.5 824.5,296.5 818.5,293.5 815.5,286.5 812.5,284.5 813.5,277.5 811.5,270.5 807.5,267.5 810.5,258.5"
 fill="#000000" 
    stroke-linecap="round"
    stroke-linejoin="round"
          /> 
</svg>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
 /* border: 1px solid;*/
  }
 
path {
  fill: none;
  stroke: url(#stripes);
  stroke-width: 5;
  stroke-dasharray: 550 0;
  animation: dasharray 10s;
    z-index: 50px;
    
    
  }
 
@keyframes dasharray {
  1% {
    stroke-dasharray: 0 500;
  }
}
 
#crfg {
    position: absolute;
    top: 1540px;
    left: 83px;
}
 
 
 
.er {
    fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-dasharray: 550 0;
  animation: dasharray 10s;
}

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.11.2015, 17:41
Ответы с готовыми решениями:

Постепенная смена цвета
Как сделать постепенную смену свойства color? то есть, например если надо...

Массив: отрисовка массива линий по координатам
Создать программу выполняющую действия: 1)вводить и сохранять в массиве данных...

Отрисовка треугольника по введенным координатам вершин
Добрый день. Помогите с кодом для отрисовки треугольника по введенным...

Отрисовка линии
Всем привет. вот что накатал: #include &lt;cstdlib&gt; #include &lt;iostream&gt; ...

Отрисовка линии
Вот значит сижу и туплю, а проблема то легко решаемая... Так вот, поковырялся...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.11.2015, 17:41

отрисовка линии
пишу логический анализатор, функция читает состояние порта, и присваивает 150...

PyQt4. Отрисовка точек по координатам. Передача аргументов
Здравствуйте! Есть код, который отрисовывает рандомно точки, а мне нужно по...

Отрисовка динамической линии.
Мне нужно нарисовать линию на форме. По событию MouseDw начальные координаты...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru