Как сделать медленный переход SVG, когда значения x1 и x2 изменяются через jQuery? - PullRequest
Новая
       14

Как сделать медленный переход SVG, когда значения x1 и x2 изменяются через jQuery?

0 голосов
/ 09 февраля 2020

enter image description here

Таким образом, ползунок темно-зеленого прямоугольника angular, который используется для выбора периода времени, фактически состоит из ползунка с обычным диапазоном на верхней стороне, для которого я расширили маркеры вниз, а в нижней части я добавил строку SVG (чтобы завершить нижнюю часть прямоугольника), которая обновляется каждый раз, когда маркеры перетаскиваются.

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

Мне нужно, чтобы эта строка SVG также медленно скользила (переход).

Команда jQuery, используемая для обновления строки SVG при перетаскивании меток, следующая:

$ ("# bottomLine"). Attr ("x1", requiredValueInPercentage);

$ ("# bottomLine"). Attr ("x2", wantedValueInPercentage);

Я пробовал переходную длительность и продолжительность анимации в CSS, но, похоже, он не работает на линиях SVG.

Мне нужен переход за 0,3 секунды.

Спасибо

1 Ответ

0 голосов
/ 09 февраля 2020

Вместо того, чтобы анимировать значения x1 и x2, я бы сохранил линию на 100%, а я бы анимировал stroke-dasharray . Поскольку stroke-dasharray можно манипулировать с помощью css, вы можете добавить переход.

В следующем примере, пожалуйста, наведите курсор мыши на элемент svg, чтобы увидеть переход строки.

Также прочтите это css хитрость статьи: Как работает SVG Line Animation 

svg.addEventListener("mouseover",()=>{
  theLine.style.strokeDashoffset = 0;
})

svg.addEventListener("mouseleave",()=>{
  theLine.style.strokeDashoffset = 100;
})
svg{border:solid}
#theLine{stroke-dashoffset:100;transition: stroke-dashoffset 3s}
#svg:hover #theLine{transition: stroke-dashoffset 3s }
<svg viewBox="0 0 120 30" id="svg">
  <line id="theLine"  stroke-dasharray="100" x1="10" x2="110" y1="15" y2="15" stroke-width="10" stroke="black"/> 
</svg>
...