Как анимировать обтравочные контуры, определенные в элементах SVG? - PullRequest
Новая
       30

Как анимировать обтравочные контуры, определенные в элементах SVG?

2 голосов
/ 22 октября 2019

Я знаю, как анимировать путь клипа, определенный непосредственно в CSS, но я не понимаю, как это сделать, когда путь клипа связан с из SVG-элемента clipPath.

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

Вот что я пытаюсь ...

HTML

<svg>
    <defs>
        <clipPath id="shape--start">
            <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778"/>
        </clipPath>
        <clipPath id="shape--end">
            <polygon points="144.444,-44.444 166.667,-11.111 152.778,2.778 130.556,-30.556 97.222,-52.778 111.111,-66.667"/>
        </clipPath>
    </defs>
</svg>

CSS 

@keyframes shape {
    0% { clip-path: url(#shape--start) }
    100% { clip-path: url(#shape--end) }
}

Чтобы уточнить, если я использую что-то вроде

CSS

@keyframes shape {
    0% { clip-path: polygon(-44% 5%, -14% 5%, 15% 95%, -15% 95%) }
    100% { clip-path: polygon(90% 5%, 120% 5%, 149% 95%, 119% 95%) }
}

работает как положено, но я бы хотел использовать SVG для более сложных составных путей.

Спасибо за ваше время и любую помощь заранее!

Ответы [ 2 ]

3 голосов
/ 22 октября 2019

Вам нужно анимировать сам SVG, используя animate

.box {
  width:300px;
  height:200px;
  background:red;
  clip-path: url(#shape--start);
}
<svg width=0 height=0>
    <defs>
        <clipPath id="shape--start">
            <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778">
            <animate attributeType="XML" attributeName="points" 
            from="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778" 
            to="144.444,-44.444 166.667,-11.111 152.778,2.778 130.556,-30.556 97.222,-52.778 111.111,-66.667"
          dur="2s" repeatCount="indefinite"/>
            </polygon>
        </clipPath>
    </defs>
</svg>
<div class="box">

</div>
2 голосов
/ 22 октября 2019

Анимация с использованием animateTransform 

.box {
  width:300px;
  height:200px;
  background:red;
  clip-path: url(#shape--start);
}
<svg width="0" height="0">
    <defs>
        <clipPath id="shape--start">
            <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778">
            <animateTransform attributeType="XML" attributeName="transform" type="translate" 
            values="0,100;144.444,-44.444"
          dur="2s" repeatCount="indefinite"/>
            </polygon>
        </clipPath>
    </defs>
</svg>
<div class="box">

</div>

Анимация в обе стороны 

 .box {
  width:300px;
  height:200px;
  background:red;
  clip-path: url(#shape--start);
}
<svg width="0" height="0">
    <defs>
        <clipPath id="shape--start">
            <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778">
            <animateTransform attributeType="XML" attributeName="transform" type="translate" 
            values="0,100;144.444,-44.444;0,100"
          dur="2s" repeatCount="indefinite"/>
            </polygon>
        </clipPath>
    </defs>
</svg>
<div class="box">

</div>
...