Вопрос:

Обтравочная маска SVG не работает должным образом с анимацией CSS

css svg css-animations

305 просмотра

1 ответ

40 Репутация автора

Я пытаюсь использовать анимацию CSS Transform, которая работает не очень хорошо. Это мой фрагмент кода:

@keyframes waterAnim {
  0% {
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -ms-transform: translate(0, -50px);
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px);
  }
}

#Water {
  animation: waterAnim 2s ease-out infinite;
}
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="200 350 549 144">
  <style>
    .st0{clip-path:url(#SVGID_2_);fill:#54A4DE;}
  </style>
  <g id="Layer2_2">
    <clipPath id="SVGID_2_">
      <path id="SVGID_1_" d="M489.55 390.92c-.87-2.65-2.14-5.22-3.51-7.66-4.12-7.33-8.39-14.57-12.39-21.49-4.24 6.53-8.69 13.37-13.14 20.2-1.18 1.82-2.5 3.56-3.55 5.45-6.03 10.83-1.48 21.16 10.68 23.76 3.1.67 6.53.7 9.66.18 9.96-1.65 15.39-10.83 12.25-20.44z"/>
    </clipPath>
    <path id="Water" class="st0" d="M490.31 450.95H418.3V411.4s6.67-1.57 8.94-1.57c2.3 0 6.76 1.57 9.06 1.57 2.27 0 6.67-1.57 8.94-1.57 2.3 0 6.77 1.57 9.07 1.57 2.27 0 6.67-1.57 8.93-1.57 2.3 0 6.76 1.57 9.06 1.57 2.27 0 6.67-1.57 8.94-1.57 2.3 0 9.07 1.57 9.07 1.57v39.55z"/>
    <path id="DropOutline" d="M489.55 390.92c-.87-2.65-2.14-5.22-3.51-7.66-4.12-7.33-8.39-14.57-12.39-21.49-4.24 6.53-8.69 13.37-13.14 20.2-1.18 1.82-2.5 3.56-3.55 5.45-6.03 10.83-1.48 21.16 10.68 23.76 3.1.67 6.53.7 9.66.18 9.96-1.65 15.39-10.83 12.25-20.44zm-12.78 18.58c-2.8.47-5.86.44-8.63-.16-10.86-2.35-14.92-11.7-9.53-21.48.94-1.71 2.11-3.28 3.17-4.92l11.73-18.26c3.57 6.25 7.38 12.8 11.06 19.43 1.23 2.21 2.36 4.53 3.14 6.93 2.8 8.66-2.04 16.96-10.94 18.46z"/>
  </g>
</svg>

Путь движется с примененной анимацией, но он обрезается и выглядит так:

вырезанные

Когда вместо этого он должен выглядеть примерно так (взято из Illustrator) введите описание изображения здесь

Автор: Joe Источник Размещён: 16.04.2017 02:38

Ответы (1)


1 плюс

62940 Репутация автора

Решение

Пути клипа, прикрепленные к элементу, трансформируются вместе с элементом.

Что вам нужно сделать, это переместить путь клипа к родителю <g>. Тогда это не будет затронуто.

@keyframes waterAnim {
  0% {
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -ms-transform: translate(0, -50px);
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px);
  }
}

#Water {
  animation: waterAnim 2s ease-out infinite;
}
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="200 350 549 144">
  <style>
    .st0{clip-path:url(#SVGID_2_);fill:#54A4DE;}
  </style>
  <g id="Layer2_2">
    <clipPath id="SVGID_2_">
      <path id="SVGID_1_" d="M489.55 390.92c-.87-2.65-2.14-5.22-3.51-7.66-4.12-7.33-8.39-14.57-12.39-21.49-4.24 6.53-8.69 13.37-13.14 20.2-1.18 1.82-2.5 3.56-3.55 5.45-6.03 10.83-1.48 21.16 10.68 23.76 3.1.67 6.53.7 9.66.18 9.96-1.65 15.39-10.83 12.25-20.44z"/>
    </clipPath>
    <g class="st0">
      <path id="Water" d="M490.31 450.95H418.3V411.4s6.67-1.57 8.94-1.57c2.3 0 6.76 1.57 9.06 1.57 2.27 0 6.67-1.57 8.94-1.57 2.3 0 6.77 1.57 9.07 1.57 2.27 0 6.67-1.57 8.93-1.57 2.3 0 6.76 1.57 9.06 1.57 2.27 0 6.67-1.57 8.94-1.57 2.3 0 9.07 1.57 9.07 1.57v39.55z"/>
    </g>
    <path id="DropOutline" d="M489.55 390.92c-.87-2.65-2.14-5.22-3.51-7.66-4.12-7.33-8.39-14.57-12.39-21.49-4.24 6.53-8.69 13.37-13.14 20.2-1.18 1.82-2.5 3.56-3.55 5.45-6.03 10.83-1.48 21.16 10.68 23.76 3.1.67 6.53.7 9.66.18 9.96-1.65 15.39-10.83 12.25-20.44zm-12.78 18.58c-2.8.47-5.86.44-8.63-.16-10.86-2.35-14.92-11.7-9.53-21.48.94-1.71 2.11-3.28 3.17-4.92l11.73-18.26c3.57 6.25 7.38 12.8 11.06 19.43 1.23 2.21 2.36 4.53 3.14 6.93 2.8 8.66-2.04 16.96-10.94 18.46z"/>
  </g>
</svg>

Автор: Paul LeBeau Размещён: 16.04.2017 07:39
Вопросы из категории :
32x32