svg storke-dashoffest делает анимацию против часовой стрелки

Я попытался нарисовать круг svg. Поскольку мне нужно анимировать его, используя штрих-тире, обводка круга заполняется только в направлении против часовой стрелки. Есть ли способ переместить анимацию по часовой стрелке.

My Code:

 <svg width="130" height="130" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->


 <g>
  <title>Layer 1</title>
  <g>
  <path stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="2000" stroke-dasharray="2000" fill="red">
    <animate id="project_study_anim1" attributeName="stroke-dashoffset" from="2000" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1"></animate>
  </path>
  </g>
 </g>
</svg>

svg html css svg-animate
person Ram    schedule 24.04.2017    source источник
comment
Может быть, изменить from="2000" to="0" на from="0" to="2000"   -  person Ason    schedule 24.04.2017
comment
не работает для меня   -  person Ram    schedule 24.04.2017
comment
У меня работает нормально   -  person Ram    schedule 24.04.2017
comment
спасибо, но нужно время, чтобы заполнить нужно анимировать после загрузки страницы   -  person Ram    schedule 24.04.2017
comment
Что вам действительно нужно сделать, так это изменить начало/конец пути и изменить направление пути m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z   -  person Ason    schedule 24.04.2017
comment
не могли бы вы помочь мне с образцом кода   -  person Ram    schedule 24.04.2017
comment
Если бы мои навыки работы с этими SVG были бы достаточно хороши, я бы так и сделал, а также опубликовал это как ответ :)   -  person Ason    schedule 24.04.2017
comment
Давайте продолжим обсуждение в чате.   -  person Ram    schedule 24.04.2017
comment
Мне стало любопытно :) ... немного почитал и написал ответ   -  person Ason    schedule 24.04.2017

Ответы (3)


arrow_upward
0
arrow_downward

Просто переверните svg. [править] вы можете использовать встроенное преобразование, чтобы перевернуть только путь:

<svg id="this_svg" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Layer 1</title>
    <g>
    <path transform= "translate(130),scale(-1,1)" stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="2000" stroke-dasharray="2000" fill="red">
      <animate id="project_study_anim1" attributeName="stroke-dashoffset" from="2000" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1">     
      </animate>
    </path>
    </g>

</svg>

person vlk    schedule 24.04.2017
comment
что произойдет, если мне нужно, чтобы контент был в центре моего круга - person Ram; 24.04.2017
comment
перевернуть тоже :) - person G-Cyrillus; 24.04.2017
comment
@Ram Я отредактировал его, чтобы перевернуть только целевой путь. Просто перевод и масштабирование. - person vlk; 24.04.2017
comment
@ram в файле svg Если вы хотите поместить фигуру внутрь другой фигуры, вам не нужно иметь ‹path›‹path id=inside›‹/path›‹path›, но вы будет иметь ‹path›‹/path›‹path id=inside›‹/path› с использованием свойства position для их позиционирования. Итак, если 1-й путь был перевернут, 2-й нет. - person vlk; 24.04.2017
comment
Понял Бро. Объяснение было как ложка меда. Спасибо - person Ram; 24.04.2017
comment
Не могли бы вы объяснить, как работает масштабирование и преобразование в приведенном выше коде? - person Ram; 24.04.2017
comment
масштаб преобразует размер целевого элемента следующим образом масштаб(x,y), где 0 означает отсутствие размера и 1 означает исходный размер, отрицательный значение, подобное -1, отображает элемент на оси, где находится это значение. В этом примере мы имеем x=-1 и y=1. В svg свойство масштаба также перемещает элемент на расстояние, равное его размеру. В этом svg у нас есть ширина 130, поэтому масштаб (-1,1) перемещает элемент на -130 по оси x. Нам нужно переместить его в правильное положение с помощью свойства translate, которое перемещает элемент таким образом, чтобы перевести (x, y). Поэтому мы устанавливаем x=130, чтобы переместить его назад. - person vlk; 24.04.2017
comment
Как уже отмечалось, у этого решения много проблем. К счастью, есть гораздо более простое решение, которое включает изменение одного числа. Смотрите мой ответ. - person Paul LeBeau; 24.04.2017
comment
@PaulLeBeau, в чем проблема? - person vlk; 24.04.2017
comment
Ну, главное, это работает только в том случае, если вы можете изменить свой путь. Т.е. он симметричен. - person Paul LeBeau; 24.04.2017
comment
@PaulLeBeau ничего странного, это было написано для этого пути. - person vlk; 24.04.2017

arrow_upward
6
arrow_downward

Чтобы изменить направление анимации dashoffset, вам не нужно менять путь. Все, что вам обычно нужно сделать, это обратить вспять направление изменения значений смещения тире.

Обычно это означает, что ненулевое число становится отрицательным. Итак, в вашем примере смещение тире изменяется от 2000 до 0. Измените его, чтобы перейти от -2000 к 0.

На самом деле, для вашего круга 2000 — это слишком большое значение для вашего шаблона тире. Для вашей формы круга длина окружности на самом деле составляет около 333.

Смотри ниже:

<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <g>
  <path stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="-333" stroke-dasharray="333" fill="red">
    <animate id="project_study_anim1" attributeName="stroke-dashoffset" from="-333" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1"></animate>
  </path>
  </g>
 </g>
</svg>

person Paul LeBeau    schedule 24.04.2017
comment
Конечно, менять на одно значение меньше, чем у меня... плюс 1 - person Ason; 24.04.2017

arrow_upward
0
arrow_downward

Поэтому я немного почитал о пути SVG, особенно о дуге a.

Дуга имеет large-arc-flag и sweep-flag для управления тем, как она рисуется.

Тот, который вы используете, имеет дугу 1,0, но вы должны использовать 1,1, как это сделано в приведенном ниже примере. Также конечная точка нуждалась в корректировке до -0.00001,0.

Поскольку a довольно сложно объяснить, вот две ссылки с некоторым чтением:

<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <g>
  <path stroke="blue" id="svg_1" d="m66.75,11.75 a54,52 0 1 1 -0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="2000" stroke-dasharray="2000" fill="red">
    <animate id="project_study_anim1" attributeName="stroke-dashoffset" from="2000" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1"></animate>
  </path>
  </g>
 </g>
</svg>

person Ason    schedule 24.04.2017
comment
Это не общее решение. Это помогает только в том случае, если путь состоит из одной дуги. :( - person Paul LeBeau; 24.04.2017
comment
@PaulLeBeau Просто любопытно, как изменение направления анимации dashoffset с использованием отрицательного значения является более общим решением, чем выбор дуги, которая с самого начала рисуется в правильном направлении? - person Ason; 24.04.2017
comment
Это более общее решение, потому что оно работает для любого пути. Реверсирование одной команды дуги может быть не таким сложным, но реверсирование более сложного пути не так просто. - person Paul LeBeau; 24.04.2017