clip-pathを内側にかけたい

前提・実現したいこと

ローディングが完了したら中央から円でマスクを広げて
ローディング画面を消すという動きを付けたいのですが、
CSSの「clip-path」では内側をくりぬく方法は私が捜したところ
見当たらなかったのですが、あれはJavascriptなどを使用しているのでしょうか?
教えていただけると助かります。

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

回答1件

ベストアンサー

SVGのclipPath要素を使えば, 内側を中身をくり抜くことが可能です. また同等の処理はmask要素を使っても出来ます.

HTML
1<div id="clipped">clipPath要素を使ったくり抜き</div>
2<div id="masked">mask要素を使ったくり抜き</div>
3<svg width="0" height="0">
4    <defs>
5        <!--clip-pathを用いる場合-->
6        <clipPath id="cp">
7            <path d="M0,0h200v200h-200zM100,100m-50,0a50,50 0 0 0 100,0 50,50 0 0 0-100 0z"/>
8        </clipPath>
9        <!--maskを用いる場合-->
10        <mask id="m">
11            <rect width="200" height="200" fill="white"/>
12            <circle cx="100" cy="100" r="50" fill="black"/>
13        </mask>
14    </defs>
15</svg>

CSS
1#clipped,#masked{
2    width: 200px;
3    height: 200px;
4}
5#clipped{
6    background-color: green;
7    clip-path: url(#cp);
8}
9#masked{
10    background-color: orange;
11    mask: url(#m);
12}