Путь Svg с анимацией

У меня есть путь, похожий на круг. Задача — заполнить путь цветом с анимацией. Анимация заливки должна быть круговой, а не сверху вниз или снизу вверх.

мой SVG-код:

<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'>
    <g class="svg_circle" transform = "translate(0,0)">
        <path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1">
            <animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
        </path>
    </g>
</svg>


svg html css svg-animate
person Ram    schedule 22.03.2017    source источник
comment
Вам нужно будет объяснить, что вы имеете в виду под «по кругу». Возможно, добавьте изображение или два, чтобы показать, что вы имеете в виду.   -  person Paul LeBeau    schedule 22.03.2017
comment
заполнение должно происходить аналогично загрузчику, как указано в ссылке codepen.io/AitorAlejandro/pen/KVxPEy и он должен зависнуть после завершения заполнения один раз   -  person Ram    schedule 22.03.2017
comment
Вы хотите, чтобы заливка двигалась по кругу, как стрелка часов?   -  person Paul LeBeau    schedule 22.03.2017
comment
именно этого я и хочу   -  person Ram    schedule 22.03.2017

Ответы (1)


arrow_upward
3
arrow_downward

Обычная техника рисования линий «dasharray» подойдет вам в сочетании с использованием формы стрелки в качестве маски.

Этот метод описан в этом вопросе SO

Однако, поскольку головка вашей формы стрелки перекрывает хвост, для получения «идеального» результата вам, возможно, придется разделить развертку на две части. Вы бы нарисовали хвостовую часть с помощью маски хвоста, а затем вторую половину формы (включая наконечник стрелки) с помощью отдельной маски.

Вот грубая несовершенная версия, показывающая технику.

<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'>
  <defs>
    <path id="arrow" stroke="#F0F0F0" fill="none" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1"/>
    <clipPath id="arrow-clip" clipPathUnits="userSpaceOnUse">
      <use xlink:href="#arrow"/>
    </clipPath>
  </defs>

  <g clip-path="url(#arrow-clip)">
    <circle cx="244" cy="200" r="158" transform="rotate(-164,244,200)"
            fill="none" stroke="#4DAF4C" stroke-width="175"
            stroke-dasharray="993 993">
      <animate attributeName="stroke-dashoffset" from="993" to="0" begin="1s" dur="1s" fill="freeze" repeatCount="1"/>
    </circle>
  </g>
  <use xlink:href="#arrow"/>
</svg>

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

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

person Paul LeBeau    schedule 22.03.2017
comment
Спасибо, а есть ли способ замаскировать то, что похоже на изображение - person Ram; 22.03.2017
comment
В моем примере ваша фигура используется как clipPath. - person Paul LeBeau; 22.03.2017
comment
Я изменил значения пути, как показано в ссылке, и хочу, чтобы он был заполнен любым градиентом. Можете ли вы помочь jsfiddle.net/RandyRam/76bruw9j - person Ram; 22.03.2017
comment
Используйте технику, которую я вам показал. Вам понадобятся две копии анимированного круга. Закрепите один с верхней половиной стрелки, а другой с нижней половиной стрелки. - person Paul LeBeau; 22.03.2017
comment
Я понятия не имею о концепции клипа, вы можете сделать это и выложить код - person Ram; 23.03.2017
comment
Stack Overflow не является бесплатным сервисом для написания кода. Я дал вам 90% решения. Остальное очень просто. Если вы хотите нанять меня, чтобы закончить его, свяжитесь со мной через мой профиль. - person Paul LeBeau; 23.03.2017