SVGで作成した円を大きくするアニメーションを描きたい。

現在あるサイトのトップページを作っているのですが、レイヤーとしては以下のようになっており、

背景動画
SVGで作成した背景を透過する円

マウス内をクリックしたら円が広がり、背景動画が画面全体で見えるようにしたいです。どのような方法で実現できるでしょうか？

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <link rel="stylesheet" href="style.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js"></script>
10    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui">
11    <title>Online Resume</title>
12
13</head>
14
15<body>
16    <video class="haikei" autoplay loop>
17        <source src="stand1.mp4">
18    </video>
19
20
21    <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 196 196" style="enable-background:new 0 0 196 196;" xml:space="preserve">
22       <clipPath id="svgPath">
23        <circle class="en" cx="200" cy="98" r="150" />
24        </clipPath>
25    </svg>
26
27</body>
28
29</html>

css
1* {
2    padding: 0;
3    margin: 0;
4}
5
6body{
7    background-color: antiquewhite;
8}
9
10
11svg{
12    position: absolute;
13    width: 100vw;
14    height: 100vh;
15    top:0;
16    left: 0;
17    
18}
19
20.haikei {
21    background-color: azure;
22    position: absolute;
23    height: 100vh;
24    top: 0;
25    left: 0;
26  -webkit-clip-path: url(#svgPath);
27  clip-path: url(#svgPath);
28    z-index: 1000;
29}
30

行動規範の内容に同意します

回答1件

ベストアンサー

SVGのアニメーションは、<animate>タグで、とても楽に実装できます。
例えば以下です。クリッピングマスクとの組み合わせは経験がないのですが、参考になれば幸いです。

HTML
1<svg>
2  <circle cx="50%" cy="50%" r="20">
3    <animate attributeName="r" begin="0s; accumulate.end" dur="0.5s" fill="freeze" from="0" to="300" repeatCount="4" additive="sum" accumulate="sum" calcMode="spline" keySplines="1 0 0 1"/>
4  </circle>
5</svg>

過去、テストでやってみたページです:
円のアニメーション
 円のアニメーションの応用

参考:
https://developer.mozilla.org/ja/docs/Web/SVG/Element/animate

投稿2020/03/13 00:47

編集2020/03/13 00:49